এটা কি সম্ভব?
উদাহরণ:
$('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 ট্যাগ সংশোধন করার আছে?
উত্তর:
একবার কোনও ডোম উপাদান তৈরি হয়ে গেলে ট্যাগটি পরিবর্তনযোগ্য, আমার বিশ্বাস। আপনাকে এরকম কিছু করতে হবে:
$(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;। ইভেন্টগুলি একসাথে শৃঙ্খলার জন্য এটি প্রয়োজনীয়$("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])
যুক্তি:
- ট্যাগনাম: স্ট্রিং
- ট্যাগের নাম যেমন "ডিভ", "স্প্যান" ইত্যাদি
- ডেটাএন্ডএভেন্টস সহ: বুলিয়ান
- "একটি বুলিয়ান ইঙ্গিত দিচ্ছে যে ইভেন্ট হ্যান্ডলারগুলি উপাদানগুলির সাথে অনুলিপি করা উচিত কিনা j jQuery 1.4 হিসাবে, উপাদানগুলির ডেটাও অনুলিপি করা হবে।" তথ্য
- ডিপ উইথডেটাএন্ড এভেন্টস: বুলিয়ান ,
- একটি বুলিয়ান ইঙ্গিত দিচ্ছে যে ক্লোন করা উপাদানটির সমস্ত বাচ্চার ইভেন্ট ইভেন্ট হ্যান্ডলার এবং ডেটা অনুলিপি করা উচিত। ডিফল্টরূপে এর মান প্রথম যুক্তির মানের সাথে মেলে (যা মিথ্যাতে ডিফল্ট হয়) "" তথ্য
রিটার্নস:
একটি নতুন তৈরি jQuery উপাদান
ঠিক আছে, আমি জানি এখানে এখন কয়েকটি উত্তর রয়েছে তবে আমি এটি আবার লিখতে পেরেছিলাম।
এখানে আমরা ক্লোনিং ব্যবহার করি ঠিক তেমনভাবে ট্যাগটি প্রতিস্থাপন করতে পারি। আমরা .Cone এর সাথে একই সিনট্যাক্সটি অনুসরণ করছি 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()আইআইআরসি চেষ্টা করতে চাইতে পারেন ।
আইডিয়াটি উপাদানটি মোড়ানো এবং বিষয়বস্তু আনপোট করা হয়:
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 ব্যবহার করে আপনার ডোমের অভ্যন্তরে এইচটিএমএল ট্যাগগুলি পরিবর্তন করার এই দ্রুত উপায়। আমি এই প্রতিস্থাপনের সাথে () ফাংশনটি খুব দরকারী।
var text= $('p').text();
$('#change').on('click', function() {
target.replaceWith( "<h5>"+text+"</h5>" );
});আপনি এটির অর্জন করতে পারেন data-*অ্যাট্রিবিউট মত data-replace="replaceTarget,replaceBy"পেতে jQuery এর সাহায্যে তাই replaceTarget& replaceByদ্বারা মান .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');
});