特定のテキストを持つボックスを選択するにはどうすればよいですか？

Question

私はこのHTMLを持っている：

<h5>something</h5> 
<ul> 
    <li class="name">John</li> 
    <li class="age">21</li> 
</ul> 
<h5>specific text</h5> 
<ul> 
    <li class="name">Peter</li> 
    <li class="age">19</li> 
</ul> 
<h5>something else</h5> 
<ul> 
    <li class="name">Ali</li> 
    <li class="age">62</li> 
</ul> 

私はこの部分を選択します：

<h5>specific text</h5> 
<ul> 
    <li class="name">Peter</li> 
    <li class="age">19</li> 
</ul> 

ロジックは<h5>タグの内容です。私はspecific textです。実際に期待される結果は、その名前とその年齢の配列です。このようなもの：var res = ['Peter', 19];。

しかし、私のコードでは、これらすべての<ul>の選択：私はそれを修正するにはどうすればよい

$('ul').map(function(){ 
    var res = [$(this).find('li.name').text(), $(this).find('li.age').text()]; 
}); 

を？

Answer 1

:contains()を使用して、特定の文字列を含むH5を見つけることができます。その後ulは、ULのリストからデータを取得するためh5

$("h5:contains('specific text')").next('ul').map(function(){ 
 
    var res = [$(this).find('li.name').text(), $(this).find('li.age').text()]; 
 
    console.log(res) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h5>something</h5> 
 
<ul> 
 
    <li class="name">John</li> 
 
    <li class="age">21</li> 
 
</ul> 
 
<h5>specific text</h5> 
 
<ul> 
 
    <li class="name">Peter</li> 
 
    <li class="age">19</li> 
 
</ul> 
 
<h5>something else</h5> 
 
<ul> 
 
    <li class="name">Ali</li> 
 
    <li class="age">62</li> 
 
</ul>

Answer 2

jQueryのスクリプトに関連付けられていることを取得するために.next()を使用します。

$('ul').map(function(){ 
 
    var res = [$(this).find('li.name').text(), $(this).find('li.age').text()]; 
 
    // console.log(res); 
 
    
 
}); 
 
var htmVal = ''; 
 
$('h5').each(function(index){ 
 
htmVal = $(this).html(); 
 
if(htmVal == 'something else'){ 
 
var detail ={name:$(this).next().find('li.name').html(),age:$(this).next().find('li.age').html()}; 
 
console.log(detail); 
 
} 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h5>something</h5> 
 
<ul> 
 
    <li class="name">John</li> 
 
    <li class="age">21</li> 
 
</ul> 
 
<h5>specific text</h5> 
 
<ul> 
 
    <li class="name">Peter</li> 
 
    <li class="age">19</li> 
 
</ul> 
 
<h5>something else</h5> 
 
<ul> 
 
    <li class="name">Ali</li> 
 
    <li class="age">62</li> 
 
</ul>