jQuery选择器 - 儿童的孩子

Question

我有以下jquery片段（与each一起使用来迭代结果表）：

$('.foo').children('.bar').children('.first_baz').text();
$('.foo').children('.bar').children('.second_baz').text();

我用它来访问$firstvalue和$secondvalue：

<tr class='foo'>
<td class='bar'><span class='first_baz'>".$firstvalue."</span><span class='second_baz'>".$secondvalue."</span></td>
</tr>

这有效但效率高吗？我怀疑有更好的方法来访问这些价值......它是什么？

Answer 1

如果first_baz和second_baz元素只在表格中，而页面中没有其他元素，则可以跳过子函数使用以下代码段：

$('.first_baz').text(); 
$('.second_baz').text(); 

如果上述情况不成立，那么您可以将陈述缩短为

var parent = $('.foo'); //Get the parent context so that its not queried twice
$('.first_baz', parent).text(); 
$('.second_baz', parent).text(); 

Answer 2

您可以缓存所有.bar。

var bar = $('.foo').children('.bar')
bar.children('.first_baz').text();
bar.children('.second_baz').text();

Answer 3

我没有尝试，但这应该更有效率。

$('.foo .bar .first_baz').text();
$('.foo .bar .second_baz').text();

Answer 4

$('span.first_baz').text() 

如果您不需要父结构， 或

$('tr.foo > td.bar > span.first_baz').text()

如果你这样做。