jQueryを使用して< DIV>を挿入する方法可変数の子要素にラップされていますか?
質問
次のようなASP.Netコードがあります(これは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>
マークアップをできるだけきれいにしようとしていますが、さまざまな理由から、次のように最初のラベルの後のリスト項目のすべてを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を使用して、意味的に「クリーン」なフォームを維持できるようにします。
各リスト項目$(&quot; li + label&quot;)の最初のラベルを取得するjQueryセレクターを記述する方法、または:first-childを使用する方法を知っています。また、選択後に物を挿入する方法も知っています。
(少なくとも夜遅くに)私が理解できないのは、リスト項目の最初のラベルの後のすべてを見つける方法です(または基本的にリスト項目の最初のラベルを除くすべてのものは、別の方法です) it)そして、文書準備機能でDIVをラップします。
更新:
周りから一重引用符を削除すると、Owenのコードは機能しました:
$('this')、適切なディセンデントセレクターを設定します:
$("li label:first-child")リスト項目の後に現れる最初のラベルのみを選択します。
これが私がしたことです:
$(document).ready(function() {
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="GroupThese"></div>');
});
});
解決
編集:修正されたコード(詳細については、改訂履歴の古いコードとコメントを参照してください)
OKこれは動作するはずです:
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="li-non-label-child-wrapper">');
});
from:
<li>
<label>Some label</label>
<div>stuff</div>
<div>other stuff</div>
</li>
<li>
<label>Another label</label>
<div>stuff3</div>
</li>
produces:
<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>
他のヒント
1つのアプローチは、すべてを&lt; li&gt;内にラップすることです。ラベルを外に移動します。例:
var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());
所属していません StackOverflow