0

我有以下 HTML 文档结构设置：

<li class="item-i">I</li>
<li class="item-ii" style="position: relative;">II
    <ul class="level-2">
        <li class="item-a">A</li>
        <li class="item-b">B
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </li>
        <li class="item-c">C</li>
        <li class="item-d">D
            <ul class="alpha">
                <li class="alpha-1">Alpha 1</li>
                <li class="alpha-2">Alpha 2</li>
            </ul>
        </li>
        <li class="item-e">E</li>
    </ul>
</li>
<li class="item-iii">III</li>

    <input id="Set" type="button" value="Click">

所以对于我对 offsetParent 的理解是：给定 alpha-1，offset parent 应该是 alpha。所以我试图用下面的 jquery 片段在它周围创建一个简单的背景/边框

$('#Set').click(function() {
    $("li.alpha-1").offsetParent().addClass("greyMe");
});

我确实得到了我想要的效果，但不是我想的那样。你可以在这里看到它的演示。 http://jsfiddle.net/coson/DGHwb/9/

如何让它突出显示class =“alpha”的元素中的所有内容？

4

1 回答 1

0

getOffsetParent()返回定位的最近的祖先元素。因为item-ii它是祖先集合中的第一个位置元素，所以它被赋予了类。由于ul.alpha未定位，因此不会被 选择getOffsetparent()。

要选择.alpha您可以使用.parents(".alpha")：

$('#Set').click(function() {
    $("li.alpha-1").parents(".alpha").addClass("greyMe");
});

或者如果只有一个带有 class 的元素.alpha，它更简单：

$('#Set').click(function() {
    $(".alpha").addClass("greyMe");
});

JS 小提琴：http: //jsfiddle.net/DGHwb/11/

于 2013-10-04T19:00:01.533 回答