Question

我希望样式顶级父级，它应该是动态的。我只想要风格顶级父母。我们可以添加更多父div，但样式应该反映到div。这是可能的jquery。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">

$(function(){
    $('.text').parent().css('background-color','red')
})

</script>
</head>
<body>

<div>
    <div>
        <div class="menu">
            <div class="text">hiiii</div>
        </div>
    </div>
</div>

</body>

Answer 1

根据“顶级父母”的含义，您可能需要parents功能与选择器"div"：

$(function(){
    $('.text').parents("div").last().css('background-color','red');
});

请注意，如果$('.text')仅匹配一个元素，则此操作仅按预期工作。如果它匹配多个，你需要一个循环，例如：

$(function(){
    $('.text').each(function() {
        $(this).parents("div").last().css('background-color','red');
    });
});

...将每个匹配.text的“顶级父级”设置为红色。

Answer 2

你可以这样做：

$('.text').parents('div:last').css('background-color','red');

.parents()按顺序从内到外返回祖先，因此您可以加:last选择器以获取最外层的父级。

Answer 3

我认为您需要当前所选元素中的最高级别元素。您可以使用.parents()获取div的所有父母，直到body和html。

$(".text").parents()
[
<div class="menu" style="background-color: red; ">…</div>, 
<div>…</div>, 
<div>…</div>, 
<body>…</body>,
<html>…</html>
]

parents = $(".text").parents();
var rootElement = $(parents[parents.length-3])

我做-3因为我没有包含body和html（-2，而且数组是0，所以减去另一个）。你不能做这个减法并指定一个像.parents("div")这样的选择器，也只是得到最后一个。你需要知道根元素是什么类型的元素。

如何使用jquery设置顶级父元素的样式

3 个答案: