<p onclick="toggleSection($(this));"><span class="redClass"></span></p>
Javascript:
function toggleSection(element) {
element.toggleClass("redClass");
}
如何引用元素的:first-child?
<p onclick="toggleSection($(this));"><span class="redClass"></span></p>
Javascript:
function toggleSection(element) {
element.toggleClass("redClass");
}
如何引用元素的:first-child?
如果你想将选择器应用于现有 jQuery 集合所提供的上下文中,请尝试使用 find() 函数:
element.find(">:first-child").toggleClass("redClass");
Jørn Schou-Rode指出,您可能只想要找到上下文元素的第一个直接后代,因此要使用子选择器(>)。他还指出,也可以使用children()函数,它与find()非常相似,但仅在层次结构中搜索一级深度(这正是您所需要的...):
element.children(":first").toggleClass("redClass");
find()
方法会在所有后代元素中搜索,而 :first-child
选择器每个父元素只匹配一个子元素。因此,这个查询很可能会返回多个元素。或者我错了吗? - Jørn Schou-Rodeelement.children(":first-child")
或 element.children().first();
。请注意不要改变原意。 - Kevin B:first
选择器 结合 children
函数 来获取 element
的第一个子元素:单一的。element.children(":first").toggleClass("redClass");
TypeError: Object [object HTMLAnchorElement] has no method 'toggleClass'
的翻译是:类型错误:对象[object HTMLAnchorElement]没有'toggleClass'方法。 - Jørn Schou-Rode我已经添加了jsperf测试,以查看获取第一个子级(总计1000多个子级)的不同方法之间的速度差异。
给定,notif = $('#foo')
jQuery方法:
$(":first-child", notif)
- 每秒 4,304 次操作 - 最快notif.children(":first")
- 每秒 653 次操作 - 慢 85%notif.children()[0]
- 每秒 1,416 次操作 - 慢 67%本地方法:
ele.firstChild
- 每秒 4,934,323 次操作(与上述所有方法相比,速度提高了 100%)notif[0].firstChild
- 每秒 4,913,658 次操作因此,前三种 jQuery 方法不建议使用,至少对于第一个子级(我怀疑这也会是许多其他子级的情况)。如果你有一个 jQuery 对象并需要获取第一个子级,则使用数组引用[0]
(推荐)或.get(0)
从 jQuery 对象中获取本地 DOM 元素,并使用ele.firstChild
。这与常规 JavaScript 用法完全相同。
所有测试都在 Chrome Canary 版本 v15.0.854.0 中完成
firstChild
的结果与 jQuery 的 children()
或选择器查询并不相同。 firstChild
将包括文本节点,这很少是需要的。 jQuery 的 contents()
函数会*包括它们,但是 children()
不会。 新版浏览器支持 firstElementChild
,它将提供第一个子元素,但 IE < 9不支持它。 因此,如果您使用 firstChild
,则必须手动查找第一个非文本节点子元素。 - Max$(":first-child", notif)
应该改为 $(":first", notif)
。前者会返回所有第一个子元素后代。 - Drazen Bjelovuk$(notif[0].firstChild)
以提高性能,特别是在涉及许多子元素时。然后,您将再次得到一个jQuery对象。在JSBench.me上,我使用了1000个子节点进行测试,使用notif.children(":first")
获得了8,728个操作/秒,而使用$(notif[0].firstChild)
则获得了惊人的12,440,220个操作/秒。 - Piemolelement.children().first();
查找所有的子元素并获取第一个子元素。
.children(':first')
更高效。 - Gras Double你可以使用DOM
$(this).children().first()
// is equivalent to
$(this.firstChild)
你试过了吗
$(":first-child", element).toggleClass("redClass");
我认为你想将你的元素设置为搜索的上下文。可能还有一种更好的方法,其他jQuery大师会在这里跳进来为你提供解决方法 :)
element
有孙子节点,这将失败。 - Alnitak我刚写了一个插件,它尽可能使用.firstElementChild
,如果必要的话会回退到对每个节点进行迭代:
(function ($) {
var useElementChild = ('firstElementChild' in document.createElement('div'));
$.fn.firstChild = function () {
return this.map(function() {
if (useElementChild) {
return this.firstElementChild;
} else {
var node = this.firstChild;
while (node) {
if (node.type === 1) {
break;
}
node = node.nextSibling;
}
return node;
}
});
};
})(jQuery);
它不像纯DOM解决方案那样快,但在Chrome 24下的jsperf测试中,它比任何其他基于jQuery选择器的方法都要快几个数量级。
document.body
尚未初始化,2)仅当子节点数量非常高时,性能才比替代方案好得多。对于只有少数儿童(比如少于10个),$(' >:first-child',context)
稍微快一点。只有儿童的数量影响性能,而不是深度。 - codefactordocument.body
的好处,我会研究一下。 - Alnitak请按照以下方式使用
首先,给标签P以“myp”类名
然后使用以下代码
$(document).ready(function() {
$(".myp").click(function() {
$(this).children(":first").toggleClass("classname"); // this will access the span.
})
})
$(":first-child", element).toggleClass("redClass");
参考文献:http://www.snoopcode.com/jquery/jquery-first-child-selector
该网页介绍了jQuery中的:first-child选择器,它可以选择作为其父元素的第一个子元素的元素。 该选择器可以用于在网页上查找特定元素并对其进行操作,从而使开发人员更轻松地控制网页的外观和行为。我正在使用
$('.txt').first().css('display', 'none');
txt
类之外,first()
也无法完成任务:“给定一个代表一组DOM元素的jQuery对象,.first()
方法从该集合中的第一个元素构造一个新的jQuery对象。” [链接](https://api.jquery.com/first/) - fseydel
jQuery(document).ready(...)
时,您会遇到什么样的性能问题? - Vivin Paliath