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只選擇與祖父母具有相同類別的直接父母

回答

相關問題