若条件为true，则将类分配给子级

Assign a class to a child if condition is true

本文关键字：分配 条件 true      更新时间：2023-09-26

如果父元素包含style="display:none；"和某个类，我该如何给子元素一个类？

例如，我想要：

<div style="display: none;" class="hidden">
  <a href="#">Hidden</a>
</div>

将：

<div style="display: none;" class="hidden">
  <a href="#" class="new-class">Hidden</a>
</div>

以下假设页面上只有一个div。如果没有，您将需要遍历元素并执行非常相似的逻辑。

<div style="display: none;" class="hidden">
  <a href="#">Hidden</a>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        var el = document.getElementsByTagName('div')[0];
        if(el.style.display == 'none'){
            el.children[0].setAttribute('class', 'someclass');
        }
    }, false);
</script>

另一种使用querySelectorAll:的解决方案

<div style="display: none;" class="hidden">
  <a href="#">Hidden</a>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        var els = document.querySelectorAll('div.hidden[style*="display: none"]');
        for(var i = 0; i < els.length; i++) {
            els[i].children[0].setAttribute('class', 'someclass');
        }
    }, false);
</script>

http://jsfiddle.net/3f8zQ/

如果您使用的是jQuery:

var hidden = $('.hidden');
if (hidden.css('display') === 'none') {
    hidden.children('a').addClass('new-class');
}

或者听起来你想以子元素为目标并检查它的父元素，在这种情况下，你需要某种方式来引用该子元素（一个id或一个类），然后你就可以执行child.parent()了。

您也可以在香草JS中轻松完成，但这将取决于您必须支持的浏览器（是否可以使用document.getElementsByClassName等）

在jQuery中，您可以简单地使用$(':hidden > a'):

http://jsfiddle.net/t8K5e/

相关文章：