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>

例如，如果此"aa"列表中有li值文本，请提醒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

＆＃13;

$("#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;
    }
  });
}

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用简单的javascript和document.evaluate使用xpath表达式按文本查找元素。您可以检查完全匹配，还是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>

在li文本中查找一些文本

3 个答案: