Question

我有以下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()同样的结果。）

Answer 1

不是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/

请告诉我，如果我不明白这个问题： - ）

JQuery：封装元素的last-child封装父类

1 个答案: