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);

});

这对于嵌套一层深的目标没有问题，但不止于此。当出现目标嵌套两层深的列表时，会发生以下情况：

<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 回答