gpt4 book ai didi

jQuery nth-child 过滤器 li.class

转载 作者:行者123 更新时间:2023-12-01 07:49:47 25 4
gpt4 key购买 nike

简短的 CSS 代码:

 .hide {display: none;}

这是 HTML:

         <ul>
<li class="title">Who Are You?</li>
<li class="fields">
<label>*First Name:</label><br />
<input id="first_name" class="req" type="text" /><br />
<label>Middle Name:</label><br />
<input id="middle_name" type="text" /><br />
<label>Last Name Name:</label><br />
<input id="last_name" type="text" /><br />
<label>*Email:</label><br />
<input id="email" class="req" type="text" /><br />
</li>
<li class="title">Where Are You?</li>
<li class="fields">
<label>City:</label><br />
<input id="city" type="text" /><br />
<label>*State:</label><br />
<input id="state" class="req" type="text" /><br />
<label>Country:</label><br />
<input id="country" type="text" /><br />
</li>
<li class="title">What Do You Do?</li>
<li class="fields">
<label>*Occupation:</label><br />
<input id="occupation" class="req" type="text" /><br />
<label>Company</label><br />
<input id="company" type="text" /><br />
<label>Company Location:</label><br />
<input id="location" type="text" /><br />
</li>
</ul>

这是 jQuery*:

$(document).ready(function(){
$('li.fields').filter(':nth-child(n+4)').addClass('hide');
});

*代码不是我自己写的

我的麻烦是我不知道这个jQ代码是如何过滤的。它隐藏了第二个和第三个 li 元素,其中包括类“fields”,但它不应该隐藏 Last Name[...] 及更多吗?

最佳答案

您拥有的 jQuery 选择器和过滤器的工作方式如下。

首先,li.fields 挑选出类 .fieldsli 元素,结果是第二个、第四个,以及 ul 的第 6 个子元素。 (为了澄清,第 1 个、第 3 个和第 5 个子元素具有 .title 类。)请记住,n 的值为 0、1、2...

通过:nth-child(n+4)进行过滤,然后挑选出第4、5、6...子元素,这意味着第4和第6个li 元素被分配了 .hide 类,该类将隐藏它们。

label 元素是相应 li 元素的子元素,而不是 ul 元素,因此,它们不会影响选择.

关于jQuery nth-child 过滤器 li.class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31361896/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com