如果某個班級有同級同學，則添加特定的班級

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屬性，因為它沒有函數調用的開銷。

我們不能直接在dom對象上調用.siblings()方法，因為它是本機HTMLElement 。 這就是為什么我們使用$(dom)來$(dom).siblings() 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中創建wrap 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>