Как мне использовать jQuery для вставки a <DIV> , обернутого вокруг переменного количества дочерних элементов?
Вопрос
У меня есть 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 вокруг этого в функции document ready.
Обновить:
Код Оуэна заработал, как только я удалил одинарные кавычки со всего:
$('this')и установите соответствующий порядковый номер селектора:
$("li label:first-child")для того, чтобы выбрать только первую метку, которая встречается после элемента списка.
Вот что я сделал:
$(document).ready(function() {
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="GroupThese"></div>');
});
});
Решение
Редактировать:исправленный код (смотрите старый код в истории изменений и комментариях для получения дополнительной информации)
хорошо, это должно сработать:
$('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>
Другие советы
Одним из подходов было бы просто обернуть все внутри <li> , а затем переместить ярлык, например
var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());