6

我正在尝试将单击事件添加到由 Telerik ASP.NET 小部件生成的选项卡中。出于实验的目的，我将生成的 HTML 片段提取到静态页面中：

<HTML>
<HEAD>
<TITLE>sandpit</TITLE>
<SCRIPT TYPE="text/javascript" SRC="jquery-1.9.1.js"></SCRIPT>
<SCRIPT>
$(document).ready(function(){
  var foo = $("span.rtsTxt");
  var bar = foo.filter("[innerText='More']")
  bar.on('click',function(){alert('click');});
  alert('ready');
});
</SCRIPT>
</HEAD>
<BODY>
  <ul>
    <li class="rtsLI">
      <a class="rtsLink rtsAfter">
        <span class="rtsOut">
          <span class="rtsIn">
            <span class="rtsTxt">Preferences</span>
          </span>
        </span>
      </a>
    </li>
    <li class="rtsLI">
      <a class="rtsLink rtsAfter">
        <span class="rtsOut">
          <span class="rtsIn">
            <span class="rtsTxt">More</span>
          </span>
        </span>
      </a>
    </li>
  </ul>
</BODY>
</HTML>

调试显示 foo 包含预期的两个项目。但是，我无法弄清楚所选择的第二个的语法，其中 innerText 的值为“更多”。

问题只是我如何在显示的过滤器表达式中或直接在选择器字符串中表达 innerText == 'More' ？

4

5 回答 5

10

选择将返回对象的元素的另一种方法是使用如下过滤器 ： 

$(".rtsTxt").filter(function() {
    return $(this).text() == "More";
});

小提琴

于 2013-03-21T03:24:22.690 回答
8

尝试:contains选择器：

var bar = foo.filter(":contains('More')")

这是一个jsfiddle 演示，展示了它的工作原理。

警告：尽管这适用于问题中的 html，但:contains选择器将匹配包含给定文本的任何元素，而不仅仅是文本等于给定文本的元素。（正如@RAS 在下面的评论中指出的那样。）

于 2013-03-21T03:10:42.190 回答
1

这是不可能的吗？

if ($("span.rtsTxt").html() == "More") {
   // do stuff
}
于 2013-03-21T03:11:55.423 回答
1 
jQuery.expr[":"].text = jQuery.expr.createPseudo(function(arg)
{
    return function( elem ) {
        return jQuery(elem).text().toLowerCase() == arg;
    };
});
$("span.rtsTxt:text('More')")

仅返回内部文本等于“更多”的元素

于 2016-08-25T10:46:43.790 回答
0

使用包含选择器：

var bar = $("span.rtsTxt:contains('More')")
bar.on('click',function(){alert('click');});  
bar.html("yup")

工作示例：http: //jsfiddle.net/basarat/w38VE/4/

于 2013-03-21T03:18:09.127 回答