दिलचस्प पोस्ट
64-बिट में एक संयुक्त गुणा और डिवाइड ऑपरेशन करने का सबसे सटीक तरीका है? एक JTextArea या JTextPane में पाठ केंद्रित करना – क्षैतिज पाठ संरेखण सीएसएस @ मीडिया पृष्ठभूमि रंग के साथ प्रिंट मुद्दों; एक UITableViewCell पर विभाजक रेखा छिपाएं एक फ़ोल्डर से फाइल गिनती दिनांक समय क्यों नहीं कर सकते हैं क्या हर उपयोग के लिए लॉगिन शामिल करना आवश्यक है? MVC 3 फ़ाइल अपलोड और मॉडल बाध्यकारी समानताएं के साथ एक क्षेत्र बनाएँ वर्तमान शाखा को कुंजी शाखा के लिए कोई मान नहीं खींचने के लिए कॉन्फ़िगर किया गया है। Master.merge कॉन्फ़िगरेशन में पाया गया रोमन संख्या स्ट्रिंग को पूर्णांक मान कैसे परिवर्तित किया जाए? गिट: एक लाइक-रिमोट लाओ? कब "a" टैग मूल टैग के रंग गुण का उत्तराधिकारी नहीं होगा? सी # में Process.MainModule.FileName तक पहुँचने पर Win32 अपवाद से कैसे बचें? एक्लिप्से द्वारा जार निर्यात करते समय "मुख्य वर्ग की त्रुटि नहीं मिल पाई" त्रुटि

एक HTML टैग बदलने के लिए jQuery का उपयोग करें?

क्या यह संभव है?

उदाहरण:

$('a.change').click(function(){ //code to change p tag to h5 tag }); <p>Hello!</p> <a id="change">change</a> 

इसलिए परिवर्तन एंकर पर क्लिक करने से <p>Hello!</p> अनुभाग को एक एच 5 टैग में बदलने के लिए (जैसा कि एक उदाहरण के रूप में) होना चाहिए ताकि आप क्लिक के बाद <h5>Hello!</h5> मुझे पता है कि आप पी टैग को हटा सकते हैं और इसे h5 के साथ बदल सकते हैं, लेकिन क्या वास्तव में एक HTML टैग को संशोधित करने के लिए कोई रास्ता नहीं है?

वेब के समाधान से एकत्रित समाधान "एक HTML टैग बदलने के लिए jQuery का उपयोग करें?"

एक डोम तत्व बन जाने के बाद, टैग अपरिवर्तनीय है, मुझे विश्वास है। आपको ऐसा कुछ करना होगा:

 $(this).replaceWith($('<h5>' + this.innerHTML + '</h5>')); 

यहां एक विस्तार है जो यह सब कुछ करेगा, जितने ही कई तरीकों से कई तत्वों पर …

उदाहरण उपयोग:

मौजूदा वर्ग और विशेषताएँ रखें:

$('div#change').replaceTag('<span>', true);

या

मौजूदा वर्ग और विशेषताओं को छोड़ दें:

$('div#change').replaceTag('<span class=newclass>', false);

या और भी

स्पेस के साथ सभी divs को प्रतिस्थापित करें, कक्षाओं और विशेषताओं को कॉपी करें, अतिरिक्त वर्ग नाम जोड़ें

$('div').replaceTag($('<span>').addClass('wasDiv'), true);

प्लगइन स्रोत:

 $.extend({ replaceTag: function (currentElem, newTagObj, keepProps) { var $currentElem = $(currentElem); var i, $newTag = $(newTagObj).clone(); if (keepProps) {//{{{ newTag = $newTag[0]; newTag.className = currentElem.className; $.extend(newTag.classList, currentElem.classList); $.extend(newTag.attributes, currentElem.attributes); }//}}} $currentElem.wrapAll($newTag); $currentElem.contents().unwrap(); // return node; (Error spotted by Frank van Luijn) return this; // Suggested by ColeLawrence } }); $.fn.extend({ replaceTag: function (newTagObj, keepProps) { // "return" suggested by ColeLawrence return this.each(function() { jQuery.replaceTag(this, newTagObj, keepProps); }); } }); 

टैग के प्रकार को बदलने के बजाय, आपको टैग की शैली बदलनी चाहिए (या बल्कि विशिष्ट ID के साथ टैग)। स्टाइलिश परिवर्तनों को लागू करने के लिए अपने दस्तावेज़ के तत्वों को बदलना एक अच्छा अभ्यास नहीं है। इसे इस्तेमाल करे:

 $('a.change').click(function() { $('p#changed').css("font-weight", "bold"); }); <p id="changed">Hello!</p> <a id="change">change</a> 

मैंने देखा कि पहला जवाब मुझे काफी नहीं चाहिए था, इसलिए मैंने कुछ संशोधनों की और मैंने सोचा कि मैं इसे वापस यहां पोस्ट करूंगा।

बेहतर replaceTag(<tagName>)

replaceTag(<tagName>, [withDataAndEvents], [withDataAndEvents])

तर्क:

  • टैगनाम: स्ट्रिंग
    • टैग नाम जैसे "div", "span", आदि।
  • साथडेटा एंटेंट्स: बूलियन
    • "बूलियन यह दर्शाता है कि क्या ईवेंट हैंडलर्स को एलीमेंट्स के साथ कॉपी किया जाना चाहिए। जैसा कि jQuery 1.4 है, तत्व डेटा को भी प्रतिलिपि किया जाएगा।" जानकारी
  • गहरे विथडेटाऐंट्स: बूलियन ,
    • बूलियन यह इंगित करता है कि क्लोन तत्व के सभी बच्चों के लिए ईवेंट हैंडलर और डेटा कॉपी करना चाहिए। डिफ़ॉल्ट रूप से इसका मान पहले तर्क के मान से मेल खाता है (जो गलत है)। " जानकारी

यह दिखाता है:

एक नव निर्मित jQuery तत्व

ठीक है, मुझे पता है कि यहां कुछ उत्तर हैं, लेकिन मैं इसे फिर से लिखने के लिए खुद पर ले गया।

यहां हम टैग को उसी तरीके से बदल सकते हैं जिस तरह हम क्लोनिंग का उपयोग करते हैं। हम एक ही वाक्यविन्यास के रूप में .clone () के साथ withDataAndEvents और withDataAndEvents का उपयोग कर रहे हैं, जो बाल नोड्स के डेटा और घटनाओं की प्रतिलिपि बनाते हैं यदि उपयोग किया जाता है।

उदाहरण:

 $tableRow.find("td").each(function() { $(this).clone().replaceTag("li").appendTo("ul#table-row-as-list"); }); 

स्रोत:

 $.extend({ replaceTag: function (element, tagName, withDataAndEvents, deepWithDataAndEvents) { var newTag = $("<" + tagName + ">")[0]; // From [Stackoverflow: Copy all Attributes](http://stackoverflow.com/a/6753486/2096729) $.each(element.attributes, function() { newTag.setAttribute(this.name, this.value); }); $(element).children().clone(withDataAndEvents, deepWithDataAndEvents).appendTo(newTag); return newTag; } }) $.fn.extend({ replaceTag: function (tagName, withDataAndEvents, deepWithDataAndEvents) { // Use map to reconstruct the selector with newly created elements return this.map(function() { return jQuery.replaceTag(this, tagName, withDataAndEvents, deepWithDataAndEvents); }) } }) 

ध्यान दें कि यह चयनित तत्व को प्रतिस्थापित नहीं करता है , यह नव निर्मित एक देता है।

क्या कोई विशिष्ट कारण है कि आपको टैग बदलने की ज़रूरत है? अगर आप बस टेक्स्ट को बड़ा करना चाहते हैं, तो पी टैग के सीएसएस वर्ग को बदलने के बारे में जानने का एक बेहतर तरीका होगा।

कुछ इस तरह:

 $('#change').click(function(){ $('p').addClass('emphasis'); }); 

मैं एक ऐसे दृष्टिकोण से आया हूं जहां आप अपने jQuery ऑब्जेक्ट की स्ट्रिंग का प्रतिनिधित्व करते हैं और नियमित अभिव्यक्ति और मूल जावास्क्रिप्ट का उपयोग करते हुए टैग नाम को बदलते हैं। आप किसी भी सामग्री को नहीं छोड़ेंगे और प्रत्येक विशेषता / संपत्ति पर लूप नहीं करना होगा।

 /* * replaceTag * @return {$object} a new object with replaced opening and closing tag */ function replaceTag($element, newTagName) { // Identify opening and closing tag var oldTagName = $element[0].nodeName, elementString = $element[0].outerHTML, openingRegex = new RegExp("^(<" + oldTagName + " )", "i"), openingTag = elementString.match(openingRegex), closingRegex = new RegExp("(<\/" + oldTagName + ">)$", "i"), closingTag = elementString.match(closingRegex); if (openingTag && closingTag && newTagName) { // Remove opening tag elementString = elementString.slice(openingTag[0].length); // Remove closing tag elementString = elementString.slice(0, -(closingTag[0].length)); // Add new tags elementString = "<" + newTagName + " " + elementString + "</" + newTagName + ">"; } return $(elementString); } 

अंत में, आप मौजूदा ऑब्जेक्ट / नोड को निम्नानुसार बदल सकते हैं:

 var $newElement = replaceTag($rankingSubmit, 'a'); $('#not-an-a-element').replaceWith($newElement); 

यह मेरा समाधान है यह टैग के बीच टॉगल करने की अनुमति देता है

 <!DOCTYPE html> <html> <head> <title></title> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> function wrapClass(klass){ return 'to-' + klass; } function replaceTag(fromTag, toTag){ /** Create selector for all elements you want to change. * These should be in form: <fromTag class="to-toTag"></fromTag> */ var currentSelector = fromTag + '.' + wrapClass(toTag); /** Select all elements */ var $selected = $(currentSelector); /** If you found something then do the magic. */ if($selected.size() > 0){ /** Replace all selected elements */ $selected.each(function(){ /** jQuery current element. */ var $this = $(this); /** Remove class "to-toTag". It is no longer needed. */ $this.removeClass(wrapClass(toTag)); /** Create elements that will be places instead of current one. */ var $newElem = $('<' + toTag + '>'); /** Copy all attributes from old element to new one. */ var attributes = $this.prop("attributes"); $.each(attributes, function(){ $newElem.attr(this.name, this.value); }); /** Add class "to-fromTag" so you can remember it. */ $newElem.addClass(wrapClass(fromTag)); /** Place content of current element to new element. */ $newElem.html($this.html()); /** Replace old with new. */ $this.replaceWith($newElem); }); /** It is possible that current element has desired elements inside. * If so you need to look again for them. */ replaceTag(fromTag, toTag); } } </script> <style type="text/css"> section { background-color: yellow; } div { background-color: red; } .big { font-size: 40px; } </style> </head> <body> <button onclick="replaceTag('div', 'section');">Section -> Div</button> <button onclick="replaceTag('section', 'div');">Div -> Section</button> <div class="to-section"> <p>Matrix has you!</p> <div class="to-section big"> <p>Matrix has you inside!</p> </div> </div> <div class="to-section big"> <p>Matrix has me too!</p> </div> </body> </html>