blocks|key|4122156|text|在隐藏元素时，需要考虑嵌套的li。现在，如果你观察a.innerHTML返回的值，你会发现由于嵌套的原因，它得到了4次。因此，当您隐藏父li时，Billy首先被击中，包含Bob的子li也会被隐藏。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4122157|修改了您的代码段以引用a的父级，而不是直接查看所有li标记。|4122158|​|4122159|function+myFunction()+{
++++var+input,+filter,+ul,+li,+a,+i;
++++input+=+document.getElementById("myInput");
++++filter+=+input.value.toUpperCase();
++++ul+=+document.getElementById("myUL");
++++li+=+ul.getElementsByTagName("li");
++++for+(i+=+0;+i+<+li.length;+i%2B%2B)+{
++++++++a+=+li[i].getElementsByTagName("a")[0];
++++++++if+(a.innerHTML.toUpperCase().indexOf(filter)+>+-1)+{
++++++++++++a.parentElement.style.display+=+"";
++++++++}+else+{
++++++++++++a.parentElement.style.display+=+"none";
++++++++}
++++}
}|code-block|syntax|javascript|4122160|<input+type="text"+id="myInput"+onkeyup="myFunction()"+placeholder="Search+for+names.."+title="Type+in+a+name">

<ul+id="myUL">
++<li><a+href="#">Billy</a></li>
++<li><a+href="#">Bob</a></li>
++<li>
++	<ul>
++++	<li><a+href="#">Billy</a></li>
++		<li><a+href="#">Bob</a></li>
<li><ul><li><a+href="#">Bob</a></li>
<li><a+href="#">Billy</a></li>
</ul></li>
++++</ul>
++</li>
++<li><a+href="#">Billy</a></li>
++<li><a+href="#">Bob</a></li>

</ul>|4122161|4122162|entityMap^0|E|2|P|B|1W|2|2I|2|0|B|1|P|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|19|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|S|$]]

<p>You need to account for the nested <code>li</code> when hiding your elements. Right now if you watch the values being returned by <code>a.innerHTML</code> you'll see it gets Billy 4 times because of the nest. As a result, when you hide the parent <code>li</code> Billy gets hit on first, the child <code>li</code> containing Bob is also hidden.</p>

<p>Modified your snippet to reference the parent of the <code>a</code> instead of looking at all the <code>li</code> tags directly.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i &lt; li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
            a.parentElement.style.display = "";
        } else {
            a.parentElement.style.display = "none";
        }
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"&gt;

&lt;ul id="myUL"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Billy&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bob&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
  	&lt;ul&gt;
    	&lt;li&gt;&lt;a href="#"&gt;Billy&lt;/a&gt;&lt;/li&gt;
  		&lt;li&gt;&lt;a href="#"&gt;Bob&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;Bob&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Billy&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Billy&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bob&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4122170|text|function+myFunction()+{
++++var+input+=+document.getElementById("myInput");
++++var+filter+=+input.value.toUpperCase();++
++++var+ul+=+document.getElementById("myUL");++++++
++++var+li+=+ul.getElementsByTagName('li');

++++for+(var+i+=+0;+i+<+li.length;+i%2B%2B)+{
++++++++var+name+=+li[i].innerHTML;
++++++++var+parent+=li[i].parentElement;

++++++++if(parent.tagName+==+"UL"){
++++++++++++if+(name.toUpperCase().indexOf(filter)+>=+0)+{
++++++++++++++++li[i].style.display+=+'';
++++++++++++}
++++++++++++else{
++++++++++++++++li[i].style.display+=+'none';
++++++++++++}
++++++++}
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4122171|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>function myFunction() {
    var input = document.getElementById("myInput");
    var filter = input.value.toUpperCase();  
    var ul = document.getElementById("myUL");      
    var li = ul.getElementsByTagName('li');

    for (var i = 0; i &lt; li.length; i++) {
        var name = li[i].innerHTML;
        var parent =li[i].parentElement;

        if(parent.tagName == "UL"){
            if (name.toUpperCase().indexOf(filter) &gt;= 0) {
                li[i].style.display = '';
            }
            else{
                li[i].style.display = 'none';
            }
        }
    }
}
</code></pre>


<p>I have following code, the problem is when i search for "Billy", I get all three "Billy", which is what I expect.</p>

<p>However when I search for "Bob", I am only getting Two parent level "Bob". why the search loop only searches for in every level Bill and not Bob? </p>

<p>Now,right now there is only one sub-list, this will increase to many. What I want is to perform search at all level</p>

<pre><code>&lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"&gt;
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i &lt; li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"&gt;

&lt;ul id="myUL"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Billy&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bob&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
  	&lt;ul&gt;
    	&lt;li&gt;&lt;a href="#"&gt;Billy&lt;/a&gt;&lt;/li&gt;
  		&lt;li&gt;&lt;a href="#"&gt;Bob&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Billy&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bob&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


html filter search within multiple child level ul li tags

我有以下代码，问题是当我搜索“Billy”时，我得到了所有三个"Billy"，这是我所期望的。然而，当我搜索"Bob“时，我只能得到两个父级"Bob”。为什么搜索循环只在每一层中搜索Bill而不是Bob？现在，现在只有一个子列表，这将增加到许多。我想要的是在所有级别执行搜索<input type="text" id="...

问多个子级ul li标记中的html筛选器搜索
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个子级ul li标记中的html筛选器搜索EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个子级ul li标记中的html筛选器搜索
EN