テキストでテキストを検索

Question

liのリストにあるテキストがあるかどうか確認したいですか？利用できない場合は、trueに一度だけアラートしてください。

HTMLコード：

<ul class="ioptionlist"> 
    <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
    <li class="ioption">bb<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
    <li class="ioption">cc<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
    <li class="ioption">dd<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
    <li class="ioption">ee<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
    <li class="ioption">ff<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
    <li class="ioption">gg<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
</ul> 

たとえば、私はこのliリストで"aa"値テキスト、trueアラートを持っている場合。

Answer 1

function inList(list, searchText) { 
 
    return !!list.filter(function(index, item) { 
 
    return $(item).text() === searchText; 
 
    }).text(); 
 
} 
 
var list = $('ul.ioptionlist > li'); 
 
alert(inList(list, 'c')); // shows "false" 
 
alert(inList(list, 'cc')); // shows "true"

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="ioptionlist"> 
 
    <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">bb<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">cc<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">dd<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">ee<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">ff<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">gg<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
</ul>

Answer 2

$("#search").on('keyup', function() { 
 
    searchInList($(this).val()); 
 
}); 
 

 
function searchInList(enteredVal) { 
 
    $(".ioptionlist li").each(function() { 
 
    if ($(this).text() == enteredVal) { 
 
     console.log(enteredVal + ' is available'); 
 
     return false; 
 
    } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='search' /> 
 
<ul class="ioptionlist"> 
 
    <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">bb<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">cc<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">dd<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">ee<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">ff<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">gg<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
</ul>

Answer 3

あなたは、XPath式を使用して、プレーンなJavaScriptとdocument.evaluateを使用して、そのテキストによって要素を見つけることができます。あなたは、どちらかの正確な一致を確認することができ、またはliは、テキストが含まれている場合：指定されたテキストを持つ要素が存在する場合

let e = document.evaluate("//li[text()='aa']", document, null, XPathResult.ANY_TYPE, null); 
 
let first = e.iterateNext(); 
 
console.log(first.textContent); 
 

 

 
let e1 = document.evaluate("//li[contains(., 'a')]", document, null, XPathResult.ANY_TYPE, null); 
 
let first1 = e1.iterateNext(); 
 
console.log(first1.textContent);

<ul class="ioptionlist"> 
 
    <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">bb<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">cc<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">dd<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">ee<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">ff<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">gg<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
</ul>

は、単に確認するには：

let e = document.evaluate("//li[text()='aa']", document, null, XPathResult.ANY_TYPE, null); 
 
let first = e.iterateNext(); 
 
console.log("element exists: " + !! first);

<ul class="ioptionlist"> 
 
    <li class="ioption">aa<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">bb<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">cc<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">dd<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">ee<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">ff<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
    <li class="ioption">gg<span class="iclosebtn"><i class="fa fa-times" aria-hidden="true"></i></span></li> 
 
</ul>

を