jQuery嵌套跨度文本值答案

【问题标题】：jQuery nested span text valuejQuery嵌套跨度文本值
【发布时间】：2010-11-06 08:13:02
【问题描述】：

<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 和 span（将它们写在 jQuery 中）。这就是我拥有.live 的原因。我是在 divBase0 中找到嵌套跨度的最佳方法吗？其次，如何获取 span p0 中的文本？

谢谢！

【问题讨论】：

标签： jquery

【解决方案1】：

只需使用.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());
});

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

【讨论】：