কিভাবে jquery ব্যবহার করে একটি উপাদান টাইপ পরিবর্তন করতে

Question

আমি নিম্নলিখিত কোড আছে

<b class="xyzxterms" style="cursor: default; ">bryant keil bio</b>

আমি কীভাবে bট্যাগটিকে কোনও h1ট্যাগে প্রতিস্থাপন করব তবে অন্যান্য সমস্ত বৈশিষ্ট্য এবং তথ্য রাখব?

Comments

স্ট্যাকওভারফ্লো.com

— ইয়ান হান্টার

@ জিনল্যান্ড: এটি গুণাবলী রাখে না।

— ফেলিক্স ক্লিং

Answer 1

আপনি jQuery দিয়ে এটি করতে পারেন তার একটি উপায়:

var attrs = { };

$.each($("b")[0].attributes, function(idx, attr) {
    attrs[attr.nodeName] = attr.nodeValue;
});


$("b").replaceWith(function () {
    return $("<h1 />", attrs).append($(this).contents());
});

উদাহরণ: http://jsfiddle.net/yapHk/

আপডেট করুন , এখানে একটি প্লাগইন রয়েছে:

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    };
})(jQuery);

উদাহরণ: http://jsfiddle.net/mmNNJ/

Comments

@ ফেলিক্সক্লিং: ধন্যবাদ, childrenকাজ contentsহয়নি তবে করেছে।

— অ্যান্ড্রু হুইটেকার

@ অ্যান্ড্রু হুইটেকার বাহ !!! তুমি ভাল! সুতরাং কেবল নিশ্চিত হয়েই আমি বি.ক্লাস বা বি.অ্যাক্সেক্সটার্ম (xyzxterms শ্রেণীর নাম) ব্যবহার করছি

— bammab

@ অ্যান্ড্রুউইটেকার: যদি আমি ভুল না হয়ে থাকি তবে আপনার প্লাগইনে, প্রথম মিলিত উপাদানের বৈশিষ্ট্যগুলি সমস্ত মিলের উপাদানগুলিতে প্রয়োগ করা হবে। এটি আমরা যা চাই তা অগত্যা নয়। এছাড়াও সেটে কোনও উপাদান মিলে গেলে ত্রুটি বাড়ানো হয়। এখানে আপনার প্লাগইনের একটি পরিবর্তিত সংস্করণ যা প্রতিটি মিলিত উপাদানগুলির জন্য নিজস্ব বৈশিষ্ট্য রাখে এবং খালি সেটটিতে ত্রুটিটি ট্রিগার করে না: gist.github.com/2934516

— এটিয়েন

এটি একটি মোহন মত কাজ করে! বাদে যখন নির্বাচক কোনও মিলে যাওয়া উপাদান খুঁজে পেতে ব্যর্থ হয়, এটি কনসোলে একটি ত্রুটি বার্তা নিক্ষেপ করে কারণ এটি [0] অ্যাক্সেসযোগ্য বৈশিষ্ট্যগুলির অবিচ্ছেদ্য বিরতি। একটি শর্ত যুক্ত করা এটি সংশোধন করে: যদি (এই দৈর্ঘ্য! = 0) {...

— সিউনকান

@ciuncan: প্রতিক্রিয়া জন্য ধন্যবাদ! এটি .eachনীচে শো মত একটি উত্তর মত সত্যিই একটি ব্লক মোড়ানো উচিত ।

— অ্যান্ড্রু হুইটেকার

Answer 2

JQuery সম্পর্কে নিশ্চিত নয়। সাধারণ জাভাস্ক্রিপ্টের সাহায্যে আপনি এটি করতে পারেন:

var new_element = document.createElement('h1'),
    old_attributes = element.attributes,
    new_attributes = new_element.attributes;

// copy attributes
for(var i = 0, len = old_attributes.length; i < len; i++) {
    new_attributes.setNamedItem(old_attributes.item(i).cloneNode());
}

// copy child nodes
do {
    new_element.appendChild(element.firstChild);
} 
while(element.firstChild);

// replace element
element.parentNode.replaceChild(new_element, element);

ডেমো

যদিও এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ তা নিশ্চিত নয়।

একটি ভিন্নতা হতে পারে:

for(var i = 0, len = old_attributes.length; i < len; i++) {
    new_element.setAttribute(old_attributes[i].name, old_attributes[i].value);
}

আরও তথ্যের জন্য দেখুন Node.attributes ^{[এমডিএন]} ।

Comments

আপনার কোডের পারফরম্যান্স "খাঁটি jQuery" (প্রাক্তন। অ্যান্ড্রু কোড) এর চেয়ে ভাল, তবে অভ্যন্তরীণ ট্যাগগুলির সাথে কিছুটা সমস্যা আছে, আপনার কোড এবং রেফারেন্স-উদাহরণ সহ এই উদাহরণে তির্যক দেখুন ।

— পিটার ক্রাউস

আপনি যদি সংশোধন করেন তবে একটি "আদর্শ জ্যাকেউরি প্লাগইন" সংজ্ঞায়িত করা যেতে পারে, আপনার ফাংশনটিকে jquery- প্লাগইন-টেম্পলেট দ্বারা কল করে।

— পিটার ক্রাউস

সংশোধন করা হয়েছে। সমস্যাটি ছিল প্রথম সন্তানের অনুলিপি করার পরে, এটির পরবর্তী ভাইবোন আর নেই, তাই while(child = child.nextSibling)ব্যর্থ হয়েছিল। ধন্যবাদ!

— ফেলিক্স ক্লিং

Answer 3

@ জাকভ এবং @ অ্যান্ড্রু হুইটেকার

এখানে আরও উন্নতি করা হয়েছে যাতে এটি একবারে একাধিক উপাদান পরিচালনা করতে পারে।

$.fn.changeElementType = function(newType) {
    var newElements = [];

    $(this).each(function() {
        var attrs = {};

        $.each(this.attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        var newElement = $("<" + newType + "/>", attrs).append($(this).contents());

        $(this).replaceWith(newElement);

        newElements.push(newElement);
    });

    return $(newElements);
};

Answer 4

@ জাজ্বোর জবাব jQuery অবজেক্টগুলির একটি অ্যারে সম্বলিত একটি jQuery অবজেক্ট ফিরিয়েছে, যা চেইনযোগ্য ছিল না। আমি এটিকে পরিবর্তন করেছি যাতে এটি কোনও জিনিসের সাথে আরও একই রকম প্রত্যাবর্তন করে ea .এইচ ফিরে আসত:

    $.fn.changeElementType = function (newType) {
        var newElements,
            attrs,
            newElement;

        this.each(function () {
            attrs = {};

            $.each(this.attributes, function () {
                attrs[this.nodeName] = this.nodeValue;
            });

            newElement = $("<" + newType + "/>", attrs).append($(this).contents());

            $(this).replaceWith(newElement);

            if (!newElements) {
                newElements = newElement;
            } else {
                $.merge(newElements, newElement);
            }
        });

        return $(newElements);
    };

(কিছু কোড সাফাইও করেছে যাতে এটি jslint কেটে যায়))

Comments

এটি সর্বোত্তম বিকল্প মত মনে হচ্ছে। কেবলমাত্র আমি পাচ্ছি না কেন আপনি এটার (অ্যাটর) এর জন্য বিভিন্ন ঘোষণাপত্রটি সরান। এটি সেখানে রেখে দিয়ে এটি ঠিকঠাক

— জ্যাকব সি বলেছেন, মনিকা

আমি জ্লস্লিন্টের কারণে যুদ্ধগুলি গোষ্ঠীভুক্ত করেছি: "(কিছু কোড ক্লিনআপও করেছে যাতে এটি জ্লিন্ট পাস করে)") "। এর পেছনের ধারণাটি হল কোডটি দ্রুত করা, আমি মনে করি (প্রতিটি eachলুপের মধ্যে ভারগুলি পুনরায় বিবরণ করতে হবে না )।

— ফিশখান্ডার্লান

Answer 5

আমি ভাবতে পারি একমাত্র উপায় হ'ল ম্যানুয়ালি সমস্ত কিছু অনুলিপি করা: উদাহরণস্বরূপ jsfiddle

এইচটিএমএল

<b class="xyzxterms" style="cursor: default; ">bryant keil bio</b>

JQuery / জাভাস্ক্রিপ্ট

$(document).ready(function() {
    var me = $("b");
    var newMe = $("<h1>");
    for(var i=0; i<me[0].attributes.length; i++) {
        var myAttr = me[0].attributes[i].nodeName;
        var myAttrVal = me[0].attributes[i].nodeValue;
        newMe.attr(myAttr, myAttrVal);
    }
    newMe.html(me.html());
    me.replaceWith(newMe);
});

Answer 6

@ অ্যান্ড্রু হুইটেকার: আমি এই পরিবর্তনটি প্রস্তাব করছি:

$.fn.changeElementType = function(newType) {
    var attrs = {};

    $.each(this[0].attributes, function(idx, attr) {
        attrs[attr.nodeName] = attr.nodeValue;
    });

    var newelement = $("<" + newType + "/>", attrs).append($(this).contents());
    this.replaceWith(newelement);
    return newelement;
};

তারপরে আপনি এই জাতীয় জিনিসগুলি করতে পারেন: $('<div>blah</div>').changeElementType('pre').addClass('myclass');

Answer 7

changeElementType()পদ্ধতিটি যুক্ত করতে - আমি একটি জেকুয়েরি প্লাগইন ব্যবহার করতে, @ অ্যান্ড্রুউইটেকার এবং অন্যান্যদের ধারণা পছন্দ করি । তবে একটি প্লাগইন একটি ব্ল্যাকবক্সের মতো, কোড সম্পর্কে কোনও ম্যাটার নেই, যদি এটি লিটল হয় এবং সূক্ষ্মভাবে কাজ করে ... সুতরাং, কর্মক্ষমতা প্রয়োজন, এবং কোডের চেয়ে গুরুত্বপূর্ণ important

"বিশুদ্ধ জাভাস্ক্রিপ্ট" jQuery এর চেয়ে আরও ভাল পারফরম্যান্স রয়েছে: আমার মনে হয় @ ফেলিক্সক্লিংয়ের কোডটিতে @ অ্যান্ড্রুউইটেকার এবং অন্যান্যদের চেয়ে ভাল পারফরম্যান্স রয়েছে।

---

এখানে একটি "খাঁটি জাভাস্ক্রিপ্ট" (এবং "খাঁটি ডিওএম") কোড, একটি জিকুয়েরি প্লাগইনে এনক্যাপুলেটেড রয়েছে :

 (function($) {  // @FelixKling's code
    $.fn.changeElementType = function(newType) {
      for (var k=0;k<this.length; k++) {
       var e = this[k];
       var new_element = document.createElement(newType),
        old_attributes = e.attributes,
        new_attributes = new_element.attributes,
        child = e.firstChild;
       for(var i = 0, len = old_attributes.length; i < len; i++) {
        new_attributes.setNamedItem(old_attributes.item(i).cloneNode());
       }
       do {
        new_element.appendChild(e.firstChild);
       }
       while(e.firstChild);
       e.parentNode.replaceChild(new_element, e);
      }
      return this; // for chain... $(this)?  not working with multiple 
    }
 })(jQuery);

Answer 8

আমি jquery এ এইচটিএমএল ট্যাগগুলি প্রতিস্থাপন করতে এখানে একটি পদ্ধতি ব্যবহার করেছি:

// Iterate over each element and replace the tag while maintaining attributes
$('b.xyzxterms').each(function() {

  // Create a new element and assign it attributes from the current element
  var NewElement = $("<h1 />");
  $.each(this.attributes, function(i, attrib){
    $(NewElement).attr(attrib.name, attrib.value);
  });

  // Replace the current element with the new one and carry over the contents
  $(this).replaceWith(function () {
    return $(NewElement).append($(this).contents());
  });

});

Answer 9

সঙ্গে jQuery ছাড়া বৈশিষ্ট্যাবলী উপর iterating:

replaceElemপদ্ধতি নিচে গ্রহণ old Tag, new Tagএবং contextএবং প্রতিস্থাপন সফলভাবে executes:

---

replaceElem('h2', 'h1', '#test');

function replaceElem(oldElem, newElem, ctx) {
  oldElems = $(oldElem, ctx);
  //
  $.each(oldElems, function(idx, el) {
    var outerHTML, newOuterHTML, regexOpeningTag, regexClosingTag, tagName;
    // create RegExp dynamically for opening and closing tags
    tagName = $(el).get(0).tagName;
    regexOpeningTag = new RegExp('^<' + tagName, 'i'); 
    regexClosingTag = new RegExp(tagName + '>$', 'i');
    // fetch the outer elem with vanilla JS,
    outerHTML = el.outerHTML;
    // start replacing opening tag
    newOuterHTML = outerHTML.replace(regexOpeningTag, '<' + newElem);
    // continue replacing closing tag
    newOuterHTML = newOuterHTML.replace(regexClosingTag, newElem + '>');
    // replace the old elem with the new elem-string
    $(el).replaceWith(newOuterHTML);
  });

}

h1 {
  color: white;
  background-color: blue;
  position: relative;
}

h1:before {
  content: 'this is h1';
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 5px;
  background-color: black;
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="test">
  <h2>Foo</h2>
  <h2>Bar</h2>
</div>

শুভকামনা ...

Comments

আমি আপনার উত্তর পছন্দ! কেন? কারণ অন্যান্য সমস্ত উত্তরই অ্যাঙ্করকে লেবেলে রূপান্তর করার মতো সহজ কিছু করার চেষ্টা করতে ব্যর্থ হবে। এটি বলেছিল, দয়া করে আপনার উত্তরের জন্য নিম্নলিখিত সংশোধনগুলি / সংশোধনীগুলি বিবেচনা করুন: ক)। আপনার কোড নির্বাচকদের সাথে কাজ করবে না। খ) আপনার কোডটি কেস ইনসেসেটিভ রিজেেক্স সম্পাদন করা দরকার। এটি বলেছিল, এখানে আমার প্রস্তাবিত সংশোধনগুলি রয়েছে: regexOpeningTag = new RegExp ('^ <' + $ (el) .get (0) .tagName, 'i'); regexClosingTag = নতুন RegExp ($ (el) .get (0) .tagName + '> $', 'i');

— জ্যাক্স

এর মতো সরল এইচটিএমএল প্রতিস্থাপন করা আপনাকে বস্তুর সাথে সংযুক্ত যে কোনও ইভেন্ট শ্রোতাদের হারাতে সক্ষম করবে।

— হোসে ইয়েনেজ

Answer 10

জাভাস্ক্রিপ্ট সমাধান

পুরানো উপাদানটির বৈশিষ্ট্যগুলি নতুন উপাদানটিতে অনুলিপি করুন

const $oldElem = document.querySelector('.old')
const $newElem = document.createElement('div')

Array.from($oldElem.attributes).map(a => {
  $newElem.setAttribute(a.name, a.value)
})

পুরানো উপাদানটিকে নতুন উপাদান দিয়ে প্রতিস্থাপন করুন

$oldElem.parentNode.replaceChild($newElem, $oldElem)

Comments

mapএকটি নতুন অব্যবহৃত অ্যারে তৈরি করে, এটি দ্বারা প্রতিস্থাপন করা যেতে পারে forEach।

— অরখান আলিখানোভ

Answer 11

এখানে আমার সংস্করণ। এটি মূলত @ ফিশখান্ডার্লনের সংস্করণ, তবে একটি নতুন জিকুয়েরি অবজেক্ট তৈরির পরিবর্তে এটি কেবল নতুন তৈরি হওয়াগুলির সাথে পুরানো উপাদানগুলিকে ওভাররাইট করে, সুতরাং কোনও মার্জিংয়ের প্রয়োজন নেই।
ডেমো: http://jsfiddle.net/0qa7wL1b/

$.fn.changeElementType = function( newType ){
  var $this = this;

  this.each( function( index ){

    var atts = {};
    $.each( this.attributes, function(){
      atts[ this.name ] = this.value;
    });

    var $old = $(this);
    var $new = $('<'+ newType +'/>', atts ).append( $old.contents() );
    $old.replaceWith( $new );

    $this[ index ] = $new[0];
  });

  return this;
};