JQuery와 나는이 같은 HTML 구조가 특정 콘텐츠

Question

와 요소를 선택 :

<div class="test"> 
    <span class="content">1</span> 
</div> 
<div class="test"> 
    <span class="content">2</span> 
</div> 
... 
<div class="test"> 
    <span class="content">100</span> 
</div> 

내 자바 스크립트 코드에서를, 나는 정확히 1 또는 2을 가지고 클래스 content과 <span> 요소를 얻을 해야합니다. ..

100 나는 JQuery와에게 .contains 방법, 을 테스트하지만, 이것은 예를 1 위해 가지고있는 모든 요소를 ​​반환합니다. 1, 12, ... 등이 있습니다.

Answer 1

모든 항목에 적용되는 콜백 기능을 허용하는 filter 메서드를 사용할 수 있습니다.

var array=$('.test').find('.content').filter(function(){ 
 
    return $(this).text().trim()==100; 
 
}); 
 
console.log(Array.from(array));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <span class="content">1</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">2</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">100</span> 
 
</div>

Answer 2

은 당신이 뭔가를 할 수 있습니다 ..

$('.test').each(function() { 

if($(this).text == '1') 
{ 
var a = $(this).html(); 
} 

}); 

는 이제 텍스트를 포함하는 범위의 HTML을 포함합니다.

Answer 3

다음과 같은 방식으로 진행할 수 있습니다

:

$('.content').each(function(){ 
 
    if($(this).html() == "2") 
 
    { 
 
    console.log("THE SPAN WITH 2 IS "); 
 
    console.log($(this)[0]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <span class="content">1</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">2</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">100</span> 
 
</div>

우리가 여기서 할 것은 자신의 내부 HTML이 2 인 경우 스팬의 콘텐츠 클래스를 통해 확인하고 확인하며이 경우 우리 console.log 그것.

Answer 4

바닐라 .indexOf() 메서드를 사용할 수 있습니다.

indexOf 메서드는 찾고자하는 문자열의 매개 변수를 취하여 색인이있는 경우 색인을 반환하거나 그렇지 않으면 -1을 반환합니다.

var myEl = document.querySelector(".test"): 

for loop... 

if(myEl.innerHTML.indexOf(2) != -1){ 
    console.log("This element contains the number 2") 
} 

Answer 5

당신은 N 일치하는 번호입니다 당신이 RegExpN$을 사용할 수 있습니다 .filter() 콜백에서 얻을 .filter()을 사용하고 .textContent 또는 요소의 .innerHTML를 확인할 수 있습니다. 예를 들어 "1" 또는 "2"이 .textContent으로 설정된 요소를 일치 시키려면 RegExp/1$|2$/을 사용할 수 있습니다. "100"과 일치 시키려면 /100$/; RegExp.prototype.test()

var filtered = $("span.content").filter((_, {textContent}) => 
 
       /1$|2$/.test(textContent)); 
 

 
filtered.css("color", "green");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div class="test"> 
 
    <span class="content">1</span> 
 
</div> 
 
<div class="test"> 
 
    <span class="content">2</span> 
 
</div> 
 
... 
 
<div class="test"> 
 
    <span class="content">100</span> 
 
</div>