jQuery只选择与祖父母具有相同类别的直接父母

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

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

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

来源

2015-05-19 asturnick

使用'这一点。 parent（）。addClass（...'。或'that.closest（'。myClass'）。addClass（...'如果它不总是直接的父亲。 –

'.closest（）'需要一个参数，寻找的选择器 – Barmar

我不知道你想要选择哪个元素，所有的祖先都有同班。哪些应该被选中，哪些应该被排除？ – Barmar

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

来源

2015-05-19 01:31:52

由于某种原因，它仍然使用最接近的（） – asturnick

@ user2666378选择具有相同类别的其他父代。当在单个元素上调用时，.closest（）永远不会返回多个元素。 –

不知道为什么最接近的没有用我的方法，但你的代码肯定做到了。十分感谢。 – asturnick

这将是：

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

来源

2015-05-19 01:27:59 PeterKA

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

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

来源

2015-05-19 01:28:17 Barmar

我不知道我明白这个问题。这样，所有的父母收到一个额外的类，直到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>

来源

2015-05-19 02:08:25

jQuery只选择与祖父母具有相同类别的直接父母

回答

相关问题