3

次のような 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>

フォームを意味的に「クリーン」に保つことができるように、ページに余分なマークアップを散らかすのではなく、jQueryを介して「目立たないJavascript」でこれを行うことをお勧めします。

各リスト項目 $("li+label") の最初のラベルに到達する jQuery セレクターを作成する方法、または :first-child を使用する方法を知っています。また、選択後に物を挿入する方法も知っています。

私が理解できないのは（少なくともこの夜遅く）、リスト項目の最初のラベルの後のすべてを見つける方法です（または、基本的に最初のラベルを除くリスト項目のすべてを別の方法で配置します）。ドキュメント準備完了関数で DIV をラップします。

アップデート：

一重引用符を前後から削除すると、オーウェンのコードが機能しました。

$('これ')
適切な子孫セレクターを設定します。
$("li label:first-child")
リスト項目の後に出現する最初のラベルのみを選択するため。

これが私がしたことです：

$(document).ready(function() {

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

2 に答える 2

5

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>
于 2008-10-17T05:27:40.067 に答える
3

1 つのアプローチは、すべてを <li> 内にラップしてから、ラベルを外側に移動することです。

var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());
于 2008-10-17T05:19:58.473 に答える