javascript - Javascript if（条件）然后添加类

Question

当 div 在某个父 div 中时，我试图添加一个类。

<div class="parent1">
    <div class="child">
      Content
    </div>
</div>

.parent1 仅存在于一个页面上，而 .child 存在于其他页面上以及这一页面上。

因此，当 .child 在其他任何地方时，它的颜色是红色，但是当它在 .parent1 内部时，我希望它的颜色是蓝色。

这是我正在使用的。

if ($('.child').parents('.parent1').length == 1) {
    .addClass('.new-class');
}

我没有成功。任何人都可以帮忙吗？

Answer 1

$(".parent1 .child").addClass("new-class");

或者

$(".parent1>.child").addClass("new-class");

如果你想确保只有第一个孩子会被类填充：

<div class="parent1">
   <div class="child"> <!-- will have also "new-class" class -->
      <div class="child"> <!-- will NOT have "new-class" class -->
      </div>
   </div>
</div>

Answer 2

好吧，既然您确实将其标记为javascript ...

HTML

<div class="parent1" id="parent">
    <div class="child" id="child">
      Content
    </div>
</div>

CSS

.has-parent {
    color: blue;
}

Javascript

var child = document.getElementById('child');
var parent = document.getElementById('parent');
if (child.parentNode == parent) {
    child.className += ' has-parent';
}

演示

Answer 3

.addClass('.new-class');将该类添加到某事。您忘记告诉 jQuery 什么是什么，而是导致了语法错误（如果您打开它，您的浏览器控制台会告诉您）。我相信你想要这个：

$('.parent1 .child').addClass('.new-class');

Answer 4

你也可以只用 CSS 来做到这一点：

.child
{
    color: red;
}
.parent .child
{
    color: blue;
}

只要.parent .child规则出现在单个.child规则之后，它就会用蓝色覆盖颜色。无需额外工作即可更改颜色。如果您出于其他原因需要这个额外的课程，那么 The User 518469 的答案可能是最好的。