क्या यह संभव है?
उदाहरण:
$('a.change').click(function(){
//code to change p tag to h5 tag
});
<p>Hello!</p>
<a id="change">change</a>इसलिए परिवर्तन एंकर पर क्लिक करने से <p>Hello!</p>अनुभाग को h5 टैग में (उदाहरण के रूप में) बदलने का कारण होना चाहिए ताकि आप <h5>Hello!</h5>क्लिक के बाद समाप्त हो जाएं । मुझे लगता है कि आप पी टैग को हटा सकते हैं और इसे एच 5 के साथ बदल सकते हैं, लेकिन क्या वास्तव में एक एचटीएमएल टैग को संशोधित करना है?
जवाबों:
एक बार जब एक डोम तत्व बनाया जाता है, तो टैग अपरिवर्तनीय है, मेरा मानना है। आपको ऐसा कुछ करना होगा:
$(this).replaceWith($('<h5>' + this.innerHTML + '</h5>'));यहाँ एक विस्तार है जो यह सब, कई तत्वों के रूप में कई तरीकों से करेगा ...
उदाहरण उपयोग:
मौजूदा वर्ग और विशेषताएँ रखें:
$('div#change').replaceTag('<span>', true);
या
मौजूदा वर्ग और विशेषताओं को छोड़ें:
$('div#change').replaceTag('<span class=newclass>', false);
या और भी
सभी डिव को स्पैन, कॉपी क्लास और विशेषताओं के साथ बदलें, अतिरिक्त क्लास का नाम जोड़ें
$('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);
});
}
});return node;को वास्तव return this;में प्लगइन के "पुराने संस्करण" में दिखाया जाना चाहिए । यह एक साथ घटनाओं का पीछा करने के लिए Essentiall है$("tr:first").find("td").clone().replaceTag("li").appendTo("ul#list")
टैग के प्रकार को बदलने के बजाय, आपको टैग की शैली (या विशेष टैग के साथ टैग) को बदलना चाहिए। यह शैलीगत परिवर्तन लागू करने के लिए आपके दस्तावेज़ के तत्वों को बदलने के लिए एक अच्छा अभ्यास नहीं है। इसे इस्तेमाल करे:
$('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", "स्पैन", आदि।
- withDataAndEvents: बूलियन
- "एक बूलियन यह दर्शाता है कि क्या ईवेंट हैंडलर को तत्वों के साथ कॉपी किया जाना चाहिए। jQuery 1.4 के रूप में, तत्व डेटा को भी कॉपी किया जाएगा।" जानकारी
- deepWithDataAndEvents: बूलियन ,
- एक बूलियन यह दर्शाता है कि क्या क्लोन किए गए तत्व के सभी बच्चों के लिए घटना हैंडलर और डेटा की प्रतिलिपि बनाई जानी चाहिए। डिफ़ॉल्ट रूप से इसका मान पहले तर्क के मूल्य से मेल खाता है (जो झूठे को परिभाषित करता है)। " जानकारी
यह दिखाता है:
एक नया बनाया गया jQuery तत्व
ठीक है, मुझे पता है कि अब यहाँ कुछ उत्तर हैं, लेकिन मैंने इसे फिर से लिखने के लिए खुद को लिया।
यहां हम टैग को उसी तरह से बदल सकते हैं जिस तरह से हम क्लोनिंग का उपयोग करते हैं। हम एक ही सिंटैक्स का पालन कर रहे हैं जैसे .clone () के साथ withDataAndEventsऔर deepWithDataAndEventsजो बच्चे के डेटा और घटनाओं का उपयोग किए जाने पर कॉपी करते हैं ।
$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);
})
}
})ध्यान दें कि यह चयनित तत्व को प्रतिस्थापित नहीं करता है , यह नए बनाए गए को वापस करता है।
.children()कोई भी विशुद्ध रूप से टेक्स्ट नोड्स शामिल नहीं करेगा। आप .contents()IIRC आज़माना चाह सकते हैं ।
आइडिया तत्व को लपेटना और सामग्री को खोलना है:
function renameElement($element,newElement){
$element.wrap("<"+newElement+">");
$newElement = $element.parent();
//Copying Attributes
$.each($element.prop('attributes'), function() {
$newElement.attr(this.name,this.value);
});
$element.contents().unwrap();
return $newElement;
}नमूना उपयोग:
renameElement($('p'),'h5');मैं एक दृष्टिकोण के साथ आया था जहाँ आप अपने 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>यह jQuery का उपयोग करके आपके DOM के अंदर HTML टैग्स को बदलने का त्वरित तरीका है। मुझे लगता है कि यह प्रतिस्थापन () फ़ंक्शन बहुत उपयोगी है।
var text= $('p').text();
$('#change').on('click', function() {
target.replaceWith( "<h5>"+text+"</h5>" );
});मूल्यों को प्राप्त करने के लिए jQuery की मदद से और जैसे मान द्वारा विधि का उपयोग करें, तब आप इस data-*तरह से विशेषता प्राप्त कर सकते हैं ।
यह विशेषता तकनीक बिना किसी टैग प्रतिस्थापन को आसानी से नीचे बदले (सभी टैग प्रतिस्थापन के लिए सामान्य कोड) को प्रबंधित करने के लिए है।
मुझे आशा है कि स्निपेट के नीचे आपको बहुत मदद मिलेगी।data-replace="replaceTarget,replaceBy"replaceTargetreplaceBy.split().replaceWith()data-*
$(document).on('click', '[data-replace]', function(){
var replaceTarget = $(this).attr('data-replace').split(',')[0];
var replaceBy = $(this).attr('data-replace').split(',')[1];
$(replaceTarget).replaceWith($(replaceBy).html($(replaceTarget).html()));
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="abc">Hello World #1</p>
<a href="#" data-replace="#abc,<h1/>">P change with H1 tag</a>
<hr>
<h2 id="xyz">Hello World #2</h2>
<a href="#" data-replace="#xyz,<p/>">H1 change with P tag</a>
<hr>
<b id="bold">Hello World #2</b><br>
<a href="#" data-replace="#bold,<i/>">B change with I tag</a>
<hr>
<i id="italic">Hello World #2</i><br>
<a href="#" data-replace="#italic,<b/>">I change with B tag</a>निम्नलिखित फ़ंक्शन चाल करता है और सभी विशेषताओं को रखता है। आप इसे इस तरह उदाहरण के लिए उपयोग करते हैं:changeTag("div", "p")
function changeTag(originTag, destTag) {
while($(originTag).length) {
$(originTag).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $(`<${destTag}>`)
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
})
}
}यह सुनिश्चित करने के लिए कि यह काम करता है, निम्न उदाहरण की जाँच करें
function changeTag(originTag, destTag) {
while($(originTag).length) {
$(originTag).replaceWith (function () {
var attributes = $(this).prop("attributes");
var $newEl = $(`<${destTag}>`)
$.each(attributes, function() {
$newEl.attr(this.name, this.value);
});
return $newEl.html($(this).html())
})
}
}
changeTag("div", "p")
console.log($("body").html())<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="A" style="font-size:1em">
<div class="B" style="font-size:1.1em">A</div>
</div>
<div class="C" style="font-size:1.2em">
B
</div>
</body>क्या कोई विशिष्ट कारण है कि आपको टैग बदलने की आवश्यकता है? यदि आप केवल पाठ को बड़ा बनाना चाहते हैं, तो पी टैग के सीएसएस वर्ग को बदलना उसके बारे में जाने का एक बेहतर तरीका होगा।
कुछ इस तरह:
$('#change').click(function(){
$('p').addClass('emphasis');
});