javascript - 如果条件为真，则为孩子分配一个班级

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 中，您可以简单地执行以下操作$(':hidden > a')：

http://jsfiddle.net/t8K5e/

Answer 3

如果您使用 jQuery：

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

或者听起来您想定位子元素并检查其父元素，在这种情况下，您需要某种方式来引用该子元素（id 或类），然后您可以执行child.parent().

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