Question

假设我有这个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标记文本“My second span”（或任何其他p标记及其各自的span文本取决于我的应用程序）附加到第二个p。所以这是追加后的结果HTML：

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

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

如何修改我的jQuery选择器以定位具有特定范围文本的特定p？感谢您的任何提示。

Answer 1

您可以使用：contains（）选择器实现此目的。

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

Answer 2

试试这个：

$('#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">');

Answer 3

这应该有效：$('#mydiv p:nth-child(2)')（即选择p标记为mydiv的第二个孩子

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

Answer 4

从解释中假设您希望此文本具体。可以使用: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/

不清楚是否必须将其过滤到仅包含此文本的第二个范围

jQuery选择器取决于span标记的值

4 个答案: