मुझे ऐसी स्थिति मिली है:

<div>
    <span id="x1"></span>
    <span id="x2"></span>
    <span id="x3"></span>
</div>

और मैं ऐसा कुछ पाने की कोशिश कर रहा हूं:

<div>
    <span id="x1"></span>
</div>
<span id="x2"></span>
<div>
    <span id="x3"></span>
</div>

मैंने इस तरह unwrap() फ़ंक्शन का उपयोग करके ऐसा करने का प्रयास किया है:

$('#x2').unwrap();  

लेकिन यह फ़ंक्शन पूरे <div> को हटा देता है। तो मैं jQuery/जावास्क्रिप्ट का उपयोग करके ऐसा कैसे कर सकता हूं? सहायता के लिए धन्यवाद।

5
Kacper G. 2 अप्रैल 2018, 17:09

4 जवाब

सबसे बढ़िया उत्तर

लक्ष्य तत्व के बाद सभी भाई-बहनों को प्राप्त करें, उन्हें एक नए डिव में लपेटें और उन्हें मूल कंटेनर के बाद रखें।

दोनों divs के बीच लक्ष्य तत्व डालें।

यह कंटेनर में कितनी भी संख्या में आइटम के लिए काम करेगा और केवल लक्ष्य तत्व को खोल देगा।

const el=$("#x2")
const parent =el.parent()
const nextSiblings=el.nextAll()
const newWrap=$("<div>").append(nextSiblings)
parent.after(newWrap)
parent.after(el)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
div{border:solid 1px red;}
span{display:block}
</style>

<div>
    <span id="x1">1</span>
    <span id="x2">2</span>
    <span id="x3">3</span>
</div>

संपादित करें एक से अधिक तत्वों को खोलने की संभावना जोड़ें और पहले या अंतिम पदों से हटाने को भी संभालें।

const unWrapOne=el=>{
  const parent =el.parent()
  const nextSiblings=el.last().nextAll()
  
  if(nextSiblings.length>0){
    const newWrap=$("<div>").append(nextSiblings)
    parent.after(newWrap)
  }
  
  parent.after(el)
  
  if(parent.children().length===0)
    parent.remove()
}

const unwrapSome = elements => elements.each((index,el)=>unWrapOne($(el)))

unwrapSome($("#x3,#x5")) //unwrap 2 non contiguous elements
//unwrapSome($("#x2,#x3")) //unwrap 2 contiguous elements
//unwrapSome($("#x2")) //unwrap 1 element from middle
//unwrapSome($("#x1")) //unwrap 1 element from begining
//unwrapSome($("#x6")) //unwrap 1 element from end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
div{border:solid 1px red;}
span{display:block}
</style>

<div>
    <span id="x1">1</span>
    <span id="x2">2</span>
    <span id="x3">3</span>
    <span id="x4">4</span>
    <span id="x5">5</span>
    <span id="x6">6</span>
</div>
2
Tiago Coelho 4 मई 2018, 13:42

.wrap() और .unwrap() ने कभी भी मेरे लिए बहुत अच्छा काम नहीं किया। इसके बजाय, मैं आमतौर पर तत्वों को लपेटने के लिए outerHTML को लपेटता हूं और innerHTML को खोलने के लिए उपयोग करता हूं। आपने अपनी टिप्पणी में एक सूची का उल्लेख किया है, इसलिए मेरे पास यहां एक चयन है। भले ही आप स्पैन का चयन कैसे करें, मुझे लगता है कि मेरा बटन हैंडलर दर्शाता है कि आप क्या हासिल करने की कोशिश कर रहे हैं। इसके लिए प्रत्येक अवधि के लिए अद्वितीय आईडी की आवश्यकता नहीं होती है और न ही इससे कोई फर्क नहीं पड़ता कि आपके पास कितने हैं।

PopulateSelect();

$('button').on('click', function() {
  $('select option:selected').each(function(offset, span) {
    let $span = $(`span.unwrapped:eq(${span.index - offset})`);
    $span.removeClass('unwrapped')[0].outerHTML = `<div>${$span.html()}</div>`;
  });
  PopulateSelect();
});

function PopulateSelect() {
  let options = '';
  $('span.unwrapped').each(function() {
    options += `<option>${this.textContent}</option>`;
  });
  $('select').html(options);
}

https://jsfiddle.net/8429pcpu/2/

यह थोड़ा सा शामिल है, इसलिए लिंक के एक समूह को स्पैम करने के बजाय, बेझिझक कुछ भी पूछें जो आपको समझ में न आए।

0
PoorlyWrittenCode 4 मई 2018, 03:07
//some DOM1 vanilla... 
var parent = x1.parentElement;
//var cntnt =  parent.children;

//unwrapping the container div with ancient dhtml method
parent.outerHTML = parent.innerHTML;

// wrapping selected elements with jQuery
$("#x1,#x3").wrap('<div>');

// show the end-result HTML
console.log(document.body.innerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span id="x1"></span>
    <span id="x2"></span>
    <span id="x3"></span>
</div>
0
Bekim Bacaj 4 मई 2018, 01:38

आप सामान्य डिव रैपर से स्पैन को खोल सकते हैं और फिर बस X1 और x3 को अपने नए डिव में लपेट सकते हैं।

$('span').unwrap();
$('#x1,#x3').wrap('<div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <span id="x1">x1</span>
    <span id="x2">x2</span>
    <span id="x3">x3</span>
</div>

यदि आपके स्पैन में आईडी नहीं है, तो आप कुछ ऐसा कर सकते हैं

$('div > span:even').wrap('<div>').parent().unwrap()
6
j08691 2 अप्रैल 2018, 14:45