使用javascript搜索锚点标题属性

debugcn 发表于 Dev

UpIX

我有一个javascript搜索功能来搜索链接列表。

function search() {
var input, filter, ul, li, a, i, txtValue, title;
input = document.getElementById("srch");
filter = input.value.toUpperCase();
ul = document.getElementById("sites");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("span")[0];
    txtValue = a.textContent || a.innerText || a.title;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";

    }
}

}

以及这样的链接列表：

<li><span><a title="hippo" href="https://site1.com" target="_blank">site1.com</a> : Big grey animals</span></li>
<li><span><a title="apple" href="http://site2.com" target="_blank">site2.com</a> : roundish fruit</span></li>
<li><span><a title="couch" href="https://site3.com" target="_blank">site3.com</a> : big soft things to sit on</span></li>
<li><span><a title="lemon" href="https://site4.com" target="_blank">site4.com</a> : sour fruits with two points</span></li>

在大多数情况下，它工作得很好，但无法说明title属性。因此，如果用户要搜索其中一个关键字，则不会显示该关键字。我尝试了几种变体，但似乎无济于事。

海沃氏

要求是在元素包含的文本内和元素标题内都搜索字符串。

给定代码中的主要问题在这里：

a = li[i].getElementsByTagName("span")[0];
txtValue = a.textContent || a.innerText || a.title;

有几件事。首先，“ a”实际上不是a元素，它是第一个跨度（包含a）。其次，Javascript将按顺序评估OR中给定的值，因此，如果第一个为true，则无需费心继续评估其他值。您没有得到由不同值串联而成的字符串，而是得到了第一个（如果存在）的值，如果不是第二个，等等。

这是一个可纠正这两个问题的代码段，它很罗so，以阐明正在发生的事情。

function search() {
var input, filter, ul, li, span, a, i, txtValue, title;
input = document.getElementById("srch");
filter = input.value.toUpperCase();
ul = document.getElementById("sites");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
    span = li[i].getElementsByTagName("span")[0];    
    txtValue = span.textContent || span.innerText;
    a = span.firstChild;
    title = a.title;
    if ((txtValue.toUpperCase().indexOf(filter) > -1) || (title.toUpperCase().indexOf(filter) > -1)) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}
}

<input id="srch"/><button onclick="search()">Search</button>
<ul id="sites">
<li><span><a title="hippo" href="https://site1.com" target="_blank">site1.com</a> : Big grey animals</span></li>
<li><span><a title="apple" href="http://site2.com" target="_blank">site2.com</a> : roundish fruit</span></li>
<li><span><a title="couch" href="https://site3.com" target="_blank">site3.com</a> : big soft things to sit on</span></li>
<li><span><a title="lemon" href="https://site4.com" target="_blank">site4.com</a> : sour fruits with two points</span></li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。