0

假设我有这个 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">');

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

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

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

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

4

4 回答 4

2

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

$("#mydiv span:contains('My second span')")
于 2013-01-07T02:38:19.537 回答
0

尝试这个：

$('#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">');
于 2013-01-07T02:34:49.003 回答
0

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

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

于 2013-01-07T02:39:39.303 回答
0

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

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

于 2013-01-07T02:39:54.890 回答