Question

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

<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);
});

尝试与最亲近的，父母和最亲近的，如果我离开父母（）单独适用它。有人能帮我吗。感谢

Answer 1

使用.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);
});

Answer 2

那将是：

$('.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>

Answer 3

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

var grandparentClass = that.parent().parent().attr("class")
that.parents("." + grandparentClass).addClass("column-bg " + data_bg)

Answer 4

我不确定我是否理解了问题。通过这种方式，所有家长都可以获得一个额外的课程，直到1个家长没有上课＃myclass＆＃39;

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

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

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

＆＃13;

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++;
    }
});

＆＃13;

.myClass {
  padding: 15px 15px 15px 15px;
}

＆＃13;

<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>

＆＃13;

jQuery只选择与祖父母相同的直接父级

4 个答案: