Como eu uso jQuery para inserir um acondicionada em torno de um número variável de elementos filhos?
Pergunta
Eu tenho o código ASP.Net semelhante à seguinte (isto é dentro de um FIELDSET):
<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>
Eu estou tentando manter minha marcação tão limpo quanto eu puder, mas eu decidi que, por várias razões, eu preciso quebrar uma DIV em torno de todo o item da lista após o primeiro rótulo, como este:
<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>
Eu preferiria fazer isso com "Javascript discreto" via jQuery em vez de jogar lixo minha página com marcação extra para que eu possa manter a forma semanticamente "limpa".
Eu sei como escrever um seletor jQuery para chegar à primeira etiqueta em cada item da lista $ ( "li + etiqueta") ou utilizar: first-child. Também sei como inserir as coisas após a seleção.
O que eu não consigo descobrir (pelo menos a essa hora da noite) é como encontrar tudo após o primeiro rótulo no item da lista (ou basicamente tudo no item da lista exceto para o primeiro rótulo seria outra maneira de colocar -lo) e enrole uma DIV em torno de que na função pronto documento.
UPDATE:
código de Owen trabalhou uma vez eu removi as aspas simples de todo:
$('this')e definir o selector decendent adequada:.
$("li label:first-child"), a fim de selecionar apenas a primeira etiqueta que ocorre após um item da lista
Aqui está o que eu fiz:
$(document).ready(function() {
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="GroupThese"></div>');
});
});
Solução
Editar : código corrigido (ver código antigo no histórico de revisão e comentários para mais informações)
ok isso deve funcionar:
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="li-non-label-child-wrapper">');
});
De:
<li>
<label>Some label</label>
<div>stuff</div>
<div>other stuff</div>
</li>
<li>
<label>Another label</label>
<div>stuff3</div>
</li>
produz:
<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>
Outras dicas
Uma abordagem seria a tudo envoltório apenas dentro do
var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());