我將一個webapp從原型移植到jquery中,其中我經常使用原型Down()函數。 (選擇給定元素的第一個孩子)JQuery相當於原型Down() - 函數
掃視了jQuery的API來做到這一點的方法之一是:
原型:$(「ABC」)下()。 jQuery:$('abc')。children()。first();
但是,由於第一次提取所有子代並且逐漸應用過濾器,因此我懷疑這種用法是否有效。
什麼是更好的方法?
我將一個webapp從原型移植到jquery中,其中我經常使用原型Down()函數。 (選擇給定元素的第一個孩子)JQuery相當於原型Down() - 函數
掃視了jQuery的API來做到這一點的方法之一是:
原型:$(「ABC」)下()。 jQuery:$('abc')。children()。first();
但是,由於第一次提取所有子代並且逐漸應用過濾器,因此我懷疑這種用法是否有效。
什麼是更好的方法?
您可以擴展jQuery的,並添加一個down()
功能是這樣的:
(function($) {
$.fn.down = function() {
return $(this[0] && this[0].children && this[0].children[0]);
};
})(jQuery);
這樣你就不必在你的代碼進行任何更改。
你可以看到這個生活jsFiddle example。
你也可以在jsPerf查看性能比較。
它顯示這比在其他答案中提出的方法(其速度從40%降低到70%)更快,這是更快的。
編輯:
改編自真實原型實現另一種版本。 這是更快(25%)
(function($) {
$.fn.down = function() {
var el = this[0] && this[0].firstChild;
while (el && el.nodeType != 1)
el = el.nextSibling;
return $(el);
};
})(jQuery);
嘗試:
$('abc').children(":eq(0)")
燁感謝。(9分鐘;-) – 2010-10-21 16:13:27
所以它看起來$('abc')。children(「:eq(0)」)與我最初使用的沒有什麼不同($('form')) .children()。first();)。我希望有某種選擇器在返回第一個之前不需要知道所有的孩子.. – 2010-10-21 17:24:16
有幾個方法可以做到這一點。
首先,這將返回一個包含單個元素的數組。
$('form').children().first();
還要注意這是 $('form').children(":eq(0)")
一個更可讀的版本;
其次,這將返回剛剛從數組中取出的元素
$('form').children()[0];
或者,如果你知道你之後(而不僅僅是第一個孩子無論元素類型),你可以使用什麼類型的元素:
$('form').find("input:first");
最後,如果你不嚴格需要相對於它的父元素,你可以直接訪問它使用CSS3選擇器:
$("input:first");
我會懷疑,如果你能逃脫這最後的選擇是最有效的。但如果有人對效率有更多的話,我想聽聽。
關於性能,您可以檢查我剛創建的這個jsPerf測試:http://jsperf.com/jquery-get-first - 小孩 – 2010-10-21 16:31:56
是的,這看起來不錯,thanx – 2010-10-21 17:25:04