在li文本中查找一些文本

我想檢查一下li列表中是否有文本可用。如果不可用，則提醒true一次。在li文本中查找一些文本

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。

來源

2017-07-16 ind

說清楚..我不明白可用文本是什麼意思？可能是空li元素？ –

NOP在我上面的例子中有aa，bb，cc等。這些是可用的文本值。因此，我想檢查這個可用文本列表中的一些文本值。示例如果檢查一個值，它在li列表中可用。所以返回警報真實。 – ind

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>

來源

2017-07-16 09:43:16 ideaboxer

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

來源

2017-07-16 09:44:50

可否請您告訴我，如果它不可用警報只有一次。 – ind

你能解釋一下「只有一次」是什麼意思嗎？以上代碼僅在文本匹配時纔會輸出。 –

如果它有兩個aa值，則返回兩個可用msg。 – ind

你可以找到它的文本通過使用普通的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>

來源

2017-07-16 09:57:20 baao

考慮使用'const'而不是'let'，因爲'e'和'first'的值永遠不會改變。 – ideaboxer

在li文本中查找一些文本

回答

相關問題