nextUntil() andSelf() wrap() ... не удается обернуть КАЖДЫЕ два элемента в списке по span?

#jquery-selectors

#jquery-селекторы

Вопрос:

Работа с ajax checkboxlist, который генерируется нормально, вот так, но флажок и метка иногда переносятся на новую строку, и я просто пытался выполнить простой перенос?:

 <input type="checkbox" name="Pet.Color" value="44" id="cbxColor_44" title="Black">    <label>Black</label><input type="checkbox" name="Pet.Color" value="37" id="cbxColor_37" title="Blue"><label>Blue</label><input type="checkbox" name="Pet.Color" value="43" id="cbxColor_43" title="Brown"><label>Brown</label> .....

Пытаясь обернуть каждый ввод и метку в промежуток, я не хотел портить функцию, которая генерирует каждый из них, но добавляя / предваряя промежуток здесь или там, поэтому я пытался использовать быстрый селектор для метода wrap ():

  // nope  $('input ~ label').andSelf().wrap('<span class="nowrap" />')
//nope   $('input').nextUntil('label').wrap('<span class="nowrap" />')

//nope $('input').nextUntil('label').each(function (index) {
//    $(this).wrap('<span class="nowrap" />')
// });

// nope  $('input   label').andSelf().wrap('<span class="nowrap" />')

Предложения?

Ответ №1:

andSelf Метод просто добавляет исходный элемент в набор, который был выбран из него.
Например, $(something).children().andSelf() будет выбран дочерний элемент элемента, а также он сам.

Вам нужно выполнить цикл над каждой парой и вызвать wrapAll :

 $('input').each(function() { 
    $(this).next().andSelf()    //Get the pair of elements
           .wrapAll('<span class="nowrap" />')
});

Ответ №2:

Это так просто: мы вставляем тег после или до, затем выбираем nextUntil() или prevUntil()

$ (« <li class='aa'>Test</li> «).insertAfter(‘.bar’);

$ (‘.foo’).nextUntil(‘.aa’).andSelf().wrapAll(« <p> «);

$ («.aa»).remove();

 <ul>
    >     <li class="foo">Baz</li>
    >     <li>Select Me!</li>
    >     <li>Select Me!</li>
    >     <li>Select Me!</li>
    >     <li class="bar">Baz</li>
    >     <li>Don't Select Me</li>
    >     <li>Red Herring List Item</li> </ul>

После

 <ul>
<p><li class="foo">Baz</li>
<li>Select Me!</li>
<li>Select Me!</li>
<li>Select Me!</li>
<li class="bar">Baz</li>
</p>
<li>Don't Select Me</li>
<li>Red Herring List Item</li>
</ul>