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

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

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

Answer 3

好吧，因为你确实把它标记为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';
}

<强> DEMO

Answer 4

您也可以只使用CSS：

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

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

Javascript if（condition）然后addclass

4 个答案: