使用正则表达式的 Jquery css 选择器答案

【问题标题】：Jquery css selector using regular expressions使用正则表达式的 Jquery css 选择器
【发布时间】：2010-09-24 02:05:13
【问题描述】：

我有一个 DYNAMICALLY 生成的导航 div

<div id="WebPartWPQ9" >
 <table class="xm-ptabarea">
  <tbody>
   <tr>
    <td nowrap="" class="tab"><a href="/somelink.aspx">Overview</a></td>
    <td nowrap="" class="tab"><a href="/anothersomelink.aspx">Financials</a></td>
    <td nowrap="" class="tab"><a href="/somemorelink.aspx">Newsfeed</a></td>
   </tr>
  </tbody>
 </table>
</div>

由于 没有唯一 ID，使用 jquery，我希望能够将事件附加到“财务”选项卡链接（也许使用正则表达式选择器？）

链接的值将始终为“财务”

【问题讨论】：

标签： jquery regex css-selectors

【解决方案1】：

使用:contains selector 选择<a> 元素非常容易：

var $financialsLink = $('#WebPartWPQ9').find('td.tab > a:contains(Financials)');

【讨论】：

【解决方案2】：

$('#WebPartWPQ9 a:contains(Financials)')

【讨论】：

您缺少live 部分。
@Sarfraz，现场直播是什么？ OP 说他想将点击处理程序附加到动态生成的元素上，并且他需要找到相应的元素。一旦附加了点击处理程序，他没有提到任何关于动态重新生成这些元素的内容，这就是为什么我没有谈论任何live 部分。这将是不必要的，但当然这将取决于具体情况。
对于我的场景，LIVE 不是必需的，因为在页面加载后不会发生重新生成。很高兴了解“现场”，因为我以前不知道。

【解决方案3】：

由于它是动态生成的，您可以use .live() 处理DOM 加载后创建的元素上的事件。

$('#WebPartWPQ9 td.tab a:contains(Financials)').live('click', function() {
    // run code
});

或者如果页面加载时出现#WebPartWPQ9，我可能会改为use .delegate()。

$('#WebPartWPQ9').delegate('td.tab a:contains(Financials)', 'click', function() {
    // run code
});

这两个都使用the :contains selector 来定位带有“财务”的那个。

【讨论】：

@Bears - 我当然做到了。谢谢。 :o)

【解决方案4】：

您可以像这样使用:contains 过滤器选择器和live 方法：

$('.tab a:contains("Financials")').live('click', function(){
  // your code...
});

【讨论】：

我认为没有必要引用金融股
@Jason：是的，它会起作用，但这是一种很好的做法，因为您需要为间隔字符串指定它。 jquery docs也使用引号。