Wählen Sie alle Elemente mit der Nummer größer als 50

Question

Es gibt viele divs mit class="element-item". Ich möchte alle Divs mit der Klasse .element-item mit class="number" auswählen, die mit jQuery größer als 50 ist.

<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

zu filtern U jquery each() Funktion verwenden können.

für ur Fall:

$(".element-item").each(function(){ 
    if(parseInt($(this).find(".number").html()) > 50){ 
      // This is .element-item div with number greater Than 50! 
      // Try to alert its name 
      alert($(this).find(".name").html()); 
    } 
} 

Answer 2

Sie können die .filter() verwenden, um die mit dem divs value > 50

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>