Question

我有以下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，偏移父级应为alpha。所以我试图用下面的jquery片段

创建一个简单的背景/边框

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

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

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

Answer 1

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

要选择.parents(".alpha")，您可以使用$('#Set').click(function() { $("li.alpha-1").parents(".alpha").addClass("greyMe"); });：

.alpha

或者，如果只有一个元素具有类$('#Set').click(function() { $(".alpha").addClass("greyMe"); });，则更简单：

{{1}}

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

offsetParent（）无法正常工作？

1 个答案: