javascript - 选择所有编号大于 50 的元素项

Question

有很多带有 class="element-item" 的 div。我想使用 jQuery 选择 .element-item 类的所有 div，其中 class="number" 大于 50。

<div class="element-item one " data-category="one">
    <h3 class="name">Mercury</h3>
    <p class="symbol">Hg</p>
    <p class="number">30</p>
    <p class="weight">200.59</p>
</div>
<div class="element-item two " data-category="two">
    <h3 class="name">Mercury</h3>
    <p class="symbol">Hg</p>
    <p class="number">60</p>
    <p class="weight">200.59</p>
</div>
<div class="element-item two " data-category="three">
    <h3 class="name">Mercury</h3>
    <p class="symbol">Hg</p>
    <p class="number">80</p>
    <p class="weight">200.59</p>
</div>

Answer 1

您可以使用.filter()来过滤值> 50的div

var divs = $('.element-item .number').filter(function(){
  return parseInt($(this).text()) > 50;
});

//add a specail class
divs.each(function(){
        $(this).addClass('special') 
});

console.log(divs.length);

.special {
 background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="element-item one " data-category="one">
  <h3 class="name">Mercury</h3>
  <p class="symbol">Hg</p>
  <p class="number">30</p>
  <p class="weight">200.59</p>
</div>
<div class="element-item two " data-category="two">
  <h3 class="name">Mercury</h3>
  <p class="symbol">Hg</p>
  <p class="number">60</p>
  <p class="weight">200.59</p>
</div>
<div class="element-item two " data-category="three">
  <h3 class="name">Mercury</h3>
  <p class="symbol">Hg</p>
  <p class="number">80</p>
  <p class="weight">200.59</p>
</div>