Как использовать jQuery для вставки <DIV>, обернутого вокруг переменного числа дочерних элементов? - PullRequest
Новая
       8

Как использовать jQuery для вставки <DIV>, обернутого вокруг переменного числа дочерних элементов?

3 голосов
/ 17 октября 2008

У меня есть код ASP.Net, подобный следующему (это внутри ПОЛЕВОЙ СЕТИ): 

<ol>
    <li>
        <label>Some label</label>
        <one or more form controls, ASP.Net controls, labels, etc.>
    </li>
    <li>
        <label>Another label</label>
        <... more of the same...>
    </li>
    ...
</ol>

Я пытаюсь сохранить свою разметку настолько чистой, насколько это возможно, но я решил, что по разным причинам мне нужно обернуть DIV вокруг всего в элементе списка после первой метки, например: 

<ol>
    <li>
        <label>Some label</label>
        <div class="GroupThese">
           <one or more form controls, ASP.Net controls, labels, etc.>
        </div>
    </li>
    <li>
        <label>Another label</label>
        <div class="GroupThese">
            <... more of the same...>
        </div>
    </li>
    ...
</ol>

Я бы предпочел сделать это с помощью "ненавязчивого Javascript" через jQuery вместо того, чтобы засорять мою страницу дополнительной разметкой, чтобы я мог сохранять семантически "чистую" форму.

Я знаю, как написать селектор jQuery, чтобы добраться до первой метки в каждом элементе списка $ ("li + label") или использовать: first-child. Я также знаю, как вставить вещи после выбора.

Что я не могу понять (по крайней мере, так поздно ночью), так это как найти все, что находится после первой метки в элементе списка (или, по сути, все, что есть в элементе списка, за исключением первой, было бы другим способом это) и оберните DIV вокруг этого в функции готовности документа.

UPDATE:

Код Оуэна сработал, как только я удалил одинарные кавычки из: 

$('this')
и установил правильный селектор потомков: 
$("li label:first-child")
, чтобы выбрать только первую метку, которая появляется после элемента списка.

Вот что я сделал: 

$(document).ready(function() {

    $('li label:first-child').each(function() {
        $(this).siblings().wrapAll('<div class="GroupThese"></div>');
    });
});

Ответы [ 2 ]

5 голосов
/ 17 октября 2008

edit : исправленный код (см. Старый код в истории изменений и комментарии для получения дополнительной информации)

хорошо, это должно работать: 

$('li label:first-child').each(function() {
    $(this).siblings().wrapAll('<div class="li-non-label-child-wrapper">');
});

от 

<li>
    <label>Some label</label>
    <div>stuff</div>
    <div>other stuff</div>
</li>
<li>
    <label>Another label</label>
    <div>stuff3</div>
</li>

производит: 

<li>
    <label>Some label</label>
    <div class="li-non-label-child-wrapper">
      <div>stuff</div>
      <div>other stuff</div>
    </div>
</li>
<li>
    <label>Another label</label>
    <div class="li-non-label-child-wrapper">
      <div>stuff3</div>
    </div>
</li>
3 голосов
/ 17 октября 2008

Один из подходов состоит в том, чтобы просто обернуть все внутри

и затем переместить метку, например, 
var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());
...