2

我想要样式顶级父级，它应该是动态的。我只想要风格的顶级父母。我们可以添加更多的父 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>
4

3 回答 3

5

根据您所说的“顶级父级”的含义，您可能需要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为红色。

于 2012-07-03T06:43:17.240 回答
0

你可以这样做：

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

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

于 2012-07-03T06:43:13.330 回答
0

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

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

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

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

于 2012-07-03T06:43:39.913 回答