如何使用jquery查找具有复杂谓词的td元素

Question

我在表格中有以下HTML片段：

<td>
   <a href="xxa">
</td>
<td>
   <a href="xxy">
</td>

我想选择所有包含'a'元素的td，其中包含以“xx”开头的href。

我试过了：

$('td[a[href^="xx"]]')

但我明白了：

Error: An invalid or illegal string was specified 

如何选择这个tds数组？

Answer 1

我建议：

var tdEls = $('a[href^="xx"]').closest('td');

JS Fiddle demo

将选择<a>以'xx'开头的href元素，然后找到最接近的祖先元素<td>，返回包含<td>的jQuery对象} elements。

但是如果你想要一个数组：

var tdEls = $('a[href^="xx"]').closest('td').map(function(){
    return $(this);
}).get();

JS Fiddle demo

或者：

var tdEls = $('a[href^="xx"]').map(function(){
    return $(this).closest('td');
}).get();

JS Fiddle demo

前两个代码片段将返回一个jQuery对象数组，每个对象都可以用jQuery方法链接。

但是，如果您更喜欢简单的DOM节点数组：

var tdEls = $('a[href^="xx"]').closest('td').get();

JS Fiddle demo

顺便提一下，JS Perf方法的比较（最后一种方法，在Chromium 31 / Ubuntu 12.10中，是最快的方法）。

参考文献：

• Attribute-starts-with ([attribute^="value"]) selector。
• closest()。
• get()。
• map()。

Answer 2

我可能会使用.has（）来做过滤器

$('td').has('a[href^="xx"]')

它选择所有td元素，这些元素具有以xx开头的href的锚元素