jQuery 仅选择与祖父级具有相同类的直接父级

jQuery select only direct parent with the same class as grandparent(s)

提问人：prettyInPink 提问时间：5/19/2015 更新时间：5/19/2015 访问量：2853

问：

我在选择与该父级的父级具有相同类的元素的直接父级时遇到问题。

<div class="myClass">
  <div class="myClass">
    <div class="myClass">
      <div class="myElement" data-background="background_color_1"></div>
    </div>
  </div>
</div>

因此，只有直接父级才能从数据背景值中添加类。

$('.myElement').each(function(){
    var that = $(this);
    var data_bg = that.attr('data-background');
    that.parents().closest().addClass('column-bg').addClass(data_bg);
});

只用最亲近的、父母和最亲近的人尝试过，如果我不理会 parents（），它就会全部应用。有人可以帮我吗？ 谢谢

jquery html 选择

评论

0赞 John S 5/19/2015
用。或者如果它并不总是直系父母。that.parent().addClass(...that.closest('.myClass').addClass(...
0赞 Barmar 5/19/2015
.closest()需要一个参数，选择器来查找。
0赞 Barmar 5/19/2015
我无法弄清楚您要选择哪些元素。所有的祖先都有相同的阶级。哪些应该选择，哪些应该排除？
0赞 prettyInPink 5/19/2015
@JohnS忘了说，在具有相同类的父级之间有更多的元素，甚至在 myElement 和直接 myClass 之间也有一些 div 包装器。所以我尝试了that.parent（'myClass'）.addClass（），但仍然不起作用
0赞 prettyInPink 5/19/2015
@Barmar尝试从 myElement 向上遍历的直接父级 myClass

答：

0赞 PeterKA 5/19/2015 #1

这将是：

$('.myElement').filter(function(){
    var parent = $(this).parent();
    var grandp = parent.parent();
    return grandp.hasClass( parent.attr('class') );
})
parent().addClass(......);


$('.myElement').filter(function(){
        return $(this).parent().parent().hasClass( $(this).parent().attr('class') );
})
.parent().addClass('highlight');
div {
  padding: 14px;
}
.myClass {
  border: 1px solid black;
}
.highlight {
  background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myClass">
  <div class="myClass">
    <div class="myClass">
      <div class="myElement" data-background="background_color_1">GOOD</div>
    </div>
  </div>
</div>

<div class="myClass">
  <div class="myClass">
    <div class="myClasss">
      <div class="myElement" data-background="background_color_1">NOT GOOD</div>
    </div>
  </div>
</div>

0赞 Barmar 5/19/2015 #2

在参数中使用类选择器，将其限制为具有祖父级的父级。.parents()

var grandparentClass = that.parent().parent().attr("class")
that.parents("." + grandparentClass).addClass("column-bg " + data_bg)
2赞 John S 5/19/2015 #3

使用 .closest（'.myClass'）。它将获得最接近（即第一个）具有类“myClass”的 anscestor。

$('.myElement').each(function(){
    var that = $(this);
    var data_bg = that.attr('data-background');
    that.closest('.myClass').addClass('column-bg').addClass(data_bg);
});

评论

0赞 prettyInPink 5/19/2015
出于某种原因，它仍然使用 closest（） 选择具有相同类的其他父级
0赞 John S 5/19/2015
@user2666378 - 在单个元素上调用它时，永远不会返回多个元素。.closest()
0赞 prettyInPink 5/19/2015
不知道为什么最接近的方法不适用于我的方法，但您的代码确实做到了。非常感谢。
0赞 Aramil Rey 5/19/2015 #4

我不确定我是否理解了周二的问题。这样，所有家长都会收到一个额外的班级，直到 1 个家长没有班级“myClass”

var element = $('div.myElement');

$(document).ready(function() {
    while (element.parent().hasClass('myClass')) {
        element.parent().addClass('added');
        element = element.parent();
    }
});


=- 带有一些颜色的片段 -=

var element = $('div.myElement');
color = ['red', 'yellow', 'green'];
var i = 0;

$(document).ready(function() {
    while (element.parent().hasClass('myClass')) {
        element.parent().addClass('added');        
        element = element.parent();
        element.css('background-color', color[i]);
        i++;
    }
});
.myClass {
  padding: 15px 15px 15px 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass">
    <div class="myClass">
        <div class="myClass">
            <div class="myElement"></div>
        </div>
    </div>
</div>

上一个：通过我无法控制的代码检测类删除

下一个：访问在其他方法中的方法中创建的变量