0

私は次のHTMLを持っています:

//'[popup]' hook nested at random depths, using <ul> or <ol>, no classes or id's
<ol>
    <li>Blah</li>
    <li>Blah</li>
    <li>Foo
        <ol>
            <li>[popup]Bar</li>
        </ol>
    </li>
</ol>

[popup]フックをターゲットにして<li>、ポップアップのクラス pop/n を指定します。(Foo)<li>次に、その親にさまざまなクラスの矢印 arr/nを与えたいと考えています。

コードは次のとおりです。

var num = 0;

//Find [popup] instances, increment the number
$("li:contains('[popup]') li:last-child").each(function() {
    var nextnumber = num++;

    //add a general and a unique class to the list item containing the hook
    $(this).addClass('popup' + ' ' + 'pop' + nextnumber);

    //Get the parent list item, and give it general and unique classes also.
    $thisArrow = $(this).parent().parent();
    $thisArrow.addClass('arrow' + ' ' + 'arr' + nextnumber);

});

これは、1 レベルの深さでネストされたターゲットに対しては問題ありませんが、それ以上では機能しません。ターゲットが 2 レベルの深さでネストされているリストが表示されると、次のようになります。

<ol>
    <li>Blah</li>
    <li class="popup pop1 arrow arr1">Blah
        <ol>
            <li class="arrow arr0">Foo
                <ol>
                    <li class="popup pop0">[popup]Bar</li>
                </ol>
            </li>
            <li class="arrow arr2">Foo
                <ol>
                    <li class="popup pop2">[popup]Bar</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

最後の (常にリストの最後にある) :last-child 要素に到達すると、何らかの形でその親の親にターゲットと親の両方のクラスが与えられ、クラスがそれ自体に追加されたことがわかります。

誰かが私の間違いを指摘できれば、とても感謝しています。

（私は同じ結果を得る.parents().eq(1);代わりに試しました。）.parent().parent()

4

1 に答える 1

2

矢印のことを100％確信しているわけではありませんが、主な問題は、ネストされたliコンテンツも :contains の対象になることだったと思います

「[popup] で始まる」テキスト コンテンツのテストが役立つ場合があります。

var num = 0;

//Find [popup] instances, increment the number
$("li:contains('[popup]')").each(function() {    
    if($(this).text().indexOf("[popup]")==0){
    var nextnumber = num++;
    $(this).addClass('popup' + ' ' + 'pop' + nextnumber);
}

});​

ここを参照してください: http://jsfiddle.net/r3wK4/

問題を理解していない場合は教えてください:-)

于 2012-04-12T13:29:51.413 に答える