jQuery嵌套的span文本值

时间:2010-11-06 00:11:32

标签: jquery

<div id="divBase0" class="divBase">
<span id="p0" class="displayText">text line 1</span>
<span id="l0" class="displayText">text line 2</span>
<span id="f0" class="displayText">text line 3</span>
<span id="d0" class="displayText">text line 4</span>
<span id="t0" class="displayText">text line 5</span>
</div>

我的页面中有上面的div和spans。在下面的代码中,我能够获得p0的id(alert(pID)。但是我真的希望在p0的范围内得到文本。

$("div[id^='divBase']").live("click", function () {
    var pID = $(this).find("span[id^='p']").attr("id");
    alert(pID);
});

我应该注意到,当表单加载时,我正在生成div和spans(在jQuery中写出来)。这就是为什么我有.live。我这样做是在divBase0中找到嵌套跨度的最佳方法吗?其次,如何在span p0中获取文本?

谢谢!

1 个答案:

答案 0 :(得分:3)

只需使用.text()即可获取内部文字,如下所示:

$("div.divBase").live("click", function () {
    var pText = $(this).find("span[id^='p']").text();
    alert(pText);
});

这是最好的方法吗?如果您需要ID,那么确定,如果没有,那么只需使用类,如下所示:

<div class="divBase">
  <span class="p displayText">text line 1</span>
  <span class="l displayText">text line 2</span>
  <span class="f displayText">text line 3</span>
  <span class="d displayText">text line 4</span>
  <span class="t displayText">text line 5</span>
</div>

并在函数中使用类:

$("div.divBase").live("click", function () {
    alert($(this).find("span.p").text());
});

更好的一步是将处理程序附加到父元素所有这些.divBase元素都在.delegate()中,如下所示:

$("#divContainer").delegate("div.divBase", "click", function () {
    alert($(this).find("span.p").text());
});

这消除了初始选择器性能成本以及更便宜或未来的点击。

相关问题