jQuery 选择器取决于 span 标签的值答案

【问题标题】：jQuery selector depending on the value of the span tagjQuery 选择器取决于 span 标签的值
【发布时间】：2013-01-07 10:48:20
【问题描述】：

假设我有这个 HTML：

<div id="mydiv">
<p>
<span>My first span</span>
</p>
<p>
<span>My second span</span>
</p>
<p>
<span>My third span</span>
</p>

我的问题是我将 HTML 附加到 p 标签：

$('#mydiv p').append('<img src="http://example.com/myimage.png">');

但我只想用 span 标签文本“我的第二个 span”（或任何其他 p 标签及其各自的 span 文本，具体取决于我的应用程序）附加到第二个 p。所以这是附加后的结果 HTML：

<p>
<span>My second span</span><img src="http://example.com/myimage.png">
</p>

一个限制是我无法编辑原始 HTML 源代码，因此我无法为它们分配类或 ID 选择器。

如何修改我的 jQuery 选择器以使用特定跨度文本定位特定 p？感谢您的任何提示。

【问题讨论】：

标签： jquery

【解决方案1】：

您可以使用 :contains() 选择器来实现这一点。

$("#mydiv span:contains('My second span')")

【讨论】：

【解决方案2】：

从解释中假设您希望此文本具体。可以使用:contains(text)选择器。

var txt="My second span" ;
/* selector finds the span, parent() moves back up to "p" tag*/
$('#mydiv p span:contains('+txt+')').parent().append('<img ...>');

API 参考：http://api.jquery.com/contains-selector/

不清楚是否必须过滤到仅包含此文本的第二个跨度

【讨论】：

【解决方案3】：

试试这个：

$('#mydiv p:eq(1)').append('<img src="http://example.com/myimage.png">');

编辑：

对于您更新的问题，上面 Daveo 的答案建议的选择器应该可以做到。但是，在这种情况下，您需要使用 after 而不是 append：

$("#mydiv span:contains('My second span')").after('<img src="http://example.com/myimage.png">');

【讨论】：

谢谢，是否可以包含跨度文本值以获得更准确的选择器？
我不建议这样做，您可以为 p 元素分配一个类，该元素将包含附加的 html。
一个限制是我不能编辑原始的 HTML 源代码。感谢您的提示。

【解决方案4】：

这应该可以工作：$('#mydiv p:nth-child(2)')（即选择带有p 标记的第二个孩子mydiv）

当然，您可以通过硬编码文本选择该元素，但我认为这不是一个好主意。

【讨论】：