Question

如果父元素包含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>

Answer 1

以下假设页面上只有一个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/

Answer 2

如果你正在使用jQuery：

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

或者听起来你想要定位子元素并检查它的父元素，在这种情况下你需要一些方法来引用那个子元素（一个id或一个类），然后你就可以{{1} }。

您也可以在vanilla JS中轻松完成，但这取决于您必须支持的浏览器（无论您是否可以使用child.parent()等）。

Answer 3

在jQuery中，您只需使用$(':hidden > a')执行此操作：

http://jsfiddle.net/t8K5e/

如果condition为true，则为子类分配一个类

3 个答案: