Question

我试图遍历特定类的所有元素，然后在它们具有同级元素的情况下向其添加单独的类。我无法找出实现此目的的正确语法。

$('.someclass').each(function(index, object) {
  if (object.siblings().size() > 0) {
    object.addClass('otherclass');
  }
});

Answer 1

将会

$('.someclass').each(function(index, dom) {
  if ($(dom).siblings().length > 0) {
    $(dom).addClass('otherclass');
  }
});

从jQuery 1.8开始，.size()方法已被弃用。 .size()方法在功能上等效于.length属性；但是，首选.length属性，因为它没有函数调用的开销。

我们无法直接在.siblings()对象上调用dom方法，因为它是本地HTMLElement。这就是为什么我们做$(dom)来隐蔽JQuery对象，而现在我们可以做$(dom).siblings()。

这是一个可行的示例。

$('.third-item').each(function(index, dom) {
  if ($(dom).siblings().length > 0) {
    $(dom).addClass('otherclass');
  }
});

.otherclass {
  background: red;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <p>paragraph</p>
    <ul>
      <li class="third-item">list item 1</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li class="third-item">list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
  </div>
  <div>
    <ul>
      <li>list item 1</li>
      <li>list item 2</li>
      <li class="third-item">list item 3</li>
      <li>list item 4</li>
      <li>list item 5</li>
    </ul>
  </div>

Answer 2

this.parentNode.childNodes.length-1是获取兄弟姐妹数量的最简单方法。对于addClass，您需要在jQuery中包装object（addClass是jQuery函数）

$('.someclass').each(function(index, object) {
  if (object.parentNode.childNodes.length - 1 > 0) {
    $(object).addClass('otherclass');
  }
});

Answer 3

如果您尝试仅应用样式，则可以使用only-child添加样式，并且不需要JavaScript。

.wrapper {
  outline: 2px dotted silver;
  margin: 1em;
}

.foo {
  background-color: yellow;
}

.foo:only-child {
  background-color: green;
}

<div class="wrapper">
  <div class="foo">alone</div>
</div>

<div class="wrapper">
  <div class="foo">not alone</div>
  <div>world</div>
</div>

如果某个班级有同级同学，则添加特定的班级

3 个答案: