jQuery this的第一个子元素;

我试图将“this”从单击的span传递到一个jQuery函数，然后可以在单击的元素的第一个子元素上执行jQuery。似乎不能得到它的权利…

<p onclick="toggleSection($(this));"><span class="redClass"></span></p>

Javascript:

function toggleSection(element) {
element.toggleClass("redClass");
}

我如何引用元素的:第一个子元素?

458798 次浏览
小开
最佳答案

如果你想将选择器应用到现有jQuery集提供的上下文，请尝试find()函数:

element.find(">:first-child").toggleClass("redClass");

Jørn Schou-Rode指出，你可能只想找到context元素的第一个直系后裔，因此是子选择器(>)。他还指出，你也可以使用孩子()函数，它非常类似于find()，但只搜索层次结构的一个深度(这就是你所需要的…):

element.children(":first").toggleClass("redClass");
小开

你试过了吗

$(":first-child", element).toggleClass("redClass");

我认为你需要将元素设置为搜索的上下文。可能有一个更好的方法来做到这一点，一些其他jQuery大师会跳在这里，扔给你:)

小开

使用children函数和:first选择器来获得element的第一个子对象单:

element.children(":first").toggleClass("redClass");
小开

我添加了jsperf测试，以查看不同方法获取第一个子对象的速度差异(总共1000+个子对象)

, notif = $('#foo')

jQuery方法:

  1. $(":first-child", notif) - 4304 ops/秒-最快
  2. notif.children(":first") - 653 ops/sec -慢85%
  3. notif.children()[0] - 1416 ops/sec -慢67%

本地方法:

  1. JavaScript原生` ele.firstChild - 4934323年 ops/sec(所有上述方法都比firstChild慢100%)
  2. 本机DOM ele来自jquery: notif[0].firstChild - 4913658年 ops/秒

因此，不建议使用前3种jQuery方法，至少对于第一个孩子是这样(我怀疑其他孩子也会这样)。如果你有一个jQuery对象，并且需要获取第一个子对象，那么从jQuery对象中获取本机DOM元素，使用数组引用[0] (推荐)或.get(0)并使用ele.firstChild。这将得到与常规JavaScript使用相同的结果。

所有测试都在Chrome Canary build v15.0.854.0中完成

小开

请这样使用 首先，给标签p取一个类名，比如"myp"

然后使用下面的代码

$(document).ready(function() {
$(".myp").click(function() {
$(this).children(":first").toggleClass("classname"); // this will access the span.
})
})
小开

如果你想马上要第一个孩子，你需要

    $(element).first();

如果你想在你的元素的dom中指定第一个元素，那么使用下面的方法

    var spanElement = $(elementId).find(".redClass :first");
$(spanElement).addClass("yourClassHere");

try out: http://jsfiddle.net/vgGbc/2/

小开

我刚刚写了一个插件，如果可能的话使用.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选择器的方法快几个数量级。

小开

这可以用一个简单的魔术来完成，就像这样:

$(":first-child", element).toggleClass("redClass");

参考:http://www.snoopcode.com/jquery/jquery-first-child-selector

小开 
element.children().first();

找到所有的孩子，先下手为强。

小开

你可以使用DOM

$(this).children().first()
// is equivalent to
$(this.firstChild)
小开

我在用

 $('.txt').first().css('display', 'none');

提交答案