jQuery - एकाधिक तत्वों को लपेटने के लिए लपेटें() का उपयोग करें?

Question

<div> के अंदर एकाधिक तत्वों (विभिन्न कक्षाओं के साथ) को लपेटने के लिए मैं wrap() का उपयोग करने के बारे में कैसे जाउंगा?

उदाहरण के लिए, प्रपत्र मैं पर काम कर रहा हूँ पर वहाँ के रूप में चेकबॉक्स इनपुट और लेबल की एक बड़ी सूची है:

<input> 
<label> 
<input> 
<label> 

आदि

मैं एक <div> लपेट के लिए इच्छुक हूँ इनपुट और लेबल के आसपास, तो परिणाम होगा:

<div> 
    <input> 
    <label> 
</div> 
<div> 
    <input> 
    <label> 
</div> 

धन्यवाद!

Answer 1

आप .wrapAll() विधि का उपयोग कर सकते हैं दे देंगे।

$('form > input').each(function(){ 
    $(this).next('label').andSelf().wrapAll('<div class="test"/>'); 
}); 

अपने मार्कअप हमेशा ठीक उसी क्रम है, तो मैं उपयोग करने के लिए पसंद करते हैं:

var $set = $('form').children();  
for(var i=0, len = $set.length; i < len; i+=2){ 
    $set.slice(i, i+2).wrapAll('<div class="test"/>'); 
}  

महत्वपूर्ण तेजी से होना चाहिए।

रेफरी .: .wrapAll(), .andSelf(), .slice()

Answer 2

jQuery फ़ंक्शन wrapAll आपको कई तत्वों को लपेटने की अनुमति देता है लेकिन यदि आपके पास एक डोम लिखा गया है तो यह बहुत अच्छा काम नहीं करेगा क्योंकि आप आसानी से लेबल के एक हिस्से और चयनकर्ता के साथ इनपुट से मेल नहीं खा सकते हैं। मैं प्रत्येक भाग में कुछ वर्ग जोड़ने और फिर wrapAll का उपयोग करने का सुझाव देते हैं।

<input class="i1"/> 
<label class="i1"/> 
<input class="i2"/> 
<label class="i2"/> 

$('.i1').wrapAll('<div/>'); 
$('.i2').wrapAll('<div/>'); 

यह आपको

<div> 
    <input class="i1"/> 
    <label class="i1"/> 
</div> 
<div> 
    <input class="i2"/> 
    <label class="i2"/> 
<div> 

Answer 3

$('input+label').each(function(){ 
    $(this).prev().andSelf().wrapAll('<div>'); 
});​ 

Answer 4

आप कुछ इस तरह है:

<input id="input1"> 
<label id="label1"> 
<input id="input2"> 
<label id="label2"> 

तो आप उपयोग कर सकते jQuery:

jQuery("#input1").next().andSelf().wrapAll('<div id="newDiv" />'); 
jQuery("#input2").next().andSelf().wrapAll('<div id="newDiv" />'); 

और इस मिल:

<div id="newDiv"> 
    <input id="input1"> 
    <label id="label1"> 
</div> 
<div id="newDiv"> 
    <input id="input2"> 
    <label id="label2"> 
</div> 

मेरे लिए काम किया :-)