- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
简短的 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
挑选出类 .fields
的 li
元素,结果是第二个、第四个,以及 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/
:nth-child(2) 似乎选择了 child 1 内部的东西。 child 1 和 child 3 工作正常。 好像不涉及tag的类型,几个类似但不同的问题都有。我没有看到问题。 https:/
我想用 javascript 隐藏一个特定的 child : #table-detail > tbody > tr:nth-child(10) 基于另一个特定的前一个 child 的内容: #tabl
在我自学 CSS 的过程中,我遇到了伪选择器 :nth-child() (以及它相关的选择器 :nth-last-child() 和 :nth-of-type())。 我已经对它进行了足够的研究,以了
在自学 CSS 的过程中,我遇到了伪选择器 :nth-child() (以及它的相关选择器 :nth-last-child() 和 :nth-of-type())。 我已经对它进行了足够的研究以理解语
我对 nth-of-type 有点困惑伪类,以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的,但是考虑到这个结构 A B 1 2
我对 nth-of-type 有点困惑伪类,以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的,但是考虑到这个结构 A B 1 2
我对 nth-of-type 有点困惑伪类,以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的,但是考虑到这个结构 A B 1 2
我对 nth-of-type 有点困惑伪类,以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的,但是考虑到这个结构 A B 1 2
我对 nth-of-type 有点困惑伪类,以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的,但是考虑到这个结构 A B 1 2
我想避免在自定义 Wordpress 模板中使用函数或循环来为特定元素显示不同的背景颜色。我的问题是需要更改的容器及其父容器。 每个第 1、4、7 等配置文件类都需要有蓝色背景色。每个第 2、5、8
这个问题在这里已经有了答案: What does a space mean in a CSS selector? i.e. What is the difference between .clas
我有 3 个按钮,对于第二个按钮,我试图为其添加额外的边距,但出于某种原因,nth-child 和 nth-of-type 根本没有改变外观。我想我只是不明白它们是如何工作的,所以如果有人可以传播一点
我对 nth-of-type 有点困惑伪类,以及它应该如何工作——尤其是与 nth-child 相比类。 也许我的想法是错误的,但是考虑到这个结构 A B 1 2
我需要在 x 数量的元素之后插入一个 clearfix div,以便我可以获得格式良好的列。 我已经尝试了 :nth-child 和 :nth-of-type 并且我只在前 x 个项目之后添加了一个
遇到一个我想不通的问题。我正在尝试做的一个简单示例: 在类 .row 下第一个“跨度”的每次出现都以红色突出显示,除了第一次出现,它应该以黄色突出显示。 .row span:nth-of-type(1
什么 CSS 选择器可用于选择父元素中的所有奇数元素,但不一定是兄弟元素? A A A
我正在尝试更改 div 内的奇数 div 的样式。出于某种原因,当 nth-of-type(odd) 在另一个 div 中时,它会影响我的所有 div。这是我的常规 div 和奇数 div 的代码:
这个问题在这里已经有了答案: Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? (9 个回答) Wh
我正在尝试更改 div 内的奇数 div 的样式。出于某种原因,当 nth-of-type(odd) 在另一个 div 中时,它会影响我的所有 div。这是我的常规 div 和奇数 div 的代码:
我有这个 html 代码: CSS: .productWarp .productLine { background-color
我是一名优秀的程序员,十分优秀!