Javascript jquery在与if语句匹配的每个元素中追加一些内容

需要你的专家帮助

我有一个包含多个“div#gridContainer p”元素的页面。基本上，我只想找到p包含单词“Delivery”的元素，然后将变量“Delivery”附加到所有匹配的元素

到目前为止，这是我的代码，但它不仅仅针对包含“delivery”的元素

if ($('div#gridContainer p:contains("Delivery")').length > 0) {
var delivery = 'image';
$('.deal_img').append(delivery);      
}

任何帮助都会受到欢迎

一种方法（我强烈、强烈建议您尽一切可能修改HTML，使其符合标准，即使只是为了使您的工作更轻松，结果更可预测且跨浏览器兼容）：

以上内容基于以下HTML，因为您拒绝发布任何您自己的内容以帮助我们帮助您：

<div id="gridContainer">
    <p>Delivery</p>
    <p>Something else entirely</p>
</div>
<div id="gridContainer">
    <p>Delivery <span class="deal-img">I have <em>no</em> idea about most of this question</span>
    </p>
    <p>Something else entirely</p>
</div>
<div id="gridContainer">
    <p>Something else entirely</p>
</div>
<div id="gridContainer">
    <p>Delivery <span class="deal-img">guessing where this element should go</span>
    </p>
    <p>Something else entirely</p>
</div>

交付

完全是另一回事

这个问题我大部分都不知道

完全是另一回事

完全是另一回事

交付猜测此元素应该去哪里

完全是另一回事

参考资料：

---

很遗憾，您无法访问生成代码来修复错误的HTML输出。一个ID的多次使用只是自找麻烦。但我认为下面的单行jQuery调用将产生您想要的效果：

$（'div#gridContainer p:contains（“Delivery”）span.deal_img'）。append（'image'）

在Firefox 17、IE8和Chrome 30中测试的实例：

<div id="gridContainer"><p>This paragraph contains the word Delivery<span class="deal_img"></span>.</p></div>
<div id="gridContainer"><p>This paragraph does not contain the key word<span class="deal_img"></span>.</p></div>
<div id="gridContainer"><p>This paragraph also contains the word Delivery<span class="deal_img"></span>.</p></div>
<div id="gridContainer"><p>Neither does this paragraph does not contain the key word<span class="deal_img"></span>.</p></div>

<script type="text/javascript">
$('div#gridContainer p:contains("Delivery") span.deal_img').append('image');
</script>

本段包含“交付”一词

本段不包含关键词

本段还包含“交付”一词

这一段也没有包含关键词

$（'div#gridContainer p:contains（“Delivery”）span.deal\u img'）。append（'image'）；

更新：我已经稍微调整了我的答案。另外，由于您可能希望使用“deal_img”类将图像附加到
，我添加了一个元素，因此
#gridContainer
元素中有多个段落，或者您有多个具有相同
id的元素（这是无效的HTML，JavaScript无法按您的要求工作）？“附加变量‘delivery’”是指要将该变量中的单词添加到
p
元素的末尾，或者在
delivery
word之后？您好，David，我的页面有多个gridContainer id，其中有一个p子元素。该页面无法更改，因此如果它无效，我无能为力，只能解决它。不要解决症状，治疗疾病。此外，如果您真的需要帮助，那么HTML的示例将非常有用。如果有多个id为gridContainer的div，jQuery只会找到第一个div。因为每页只能有一个gridContainer的id。我很想治疗这种疾病，但这是不可能的，我们无法更改代码。目前，我的jquery正在查找所有这些内容，但我只想在包含“delivery”一词的内容后面加上“delivery”。这是一个更好的答案，但正如David所说，编写HTML时最好使用类而不是ID。我做jquery已经有一段时间了，我不明白为什么要将“e”指定给一个名为“self”的变量（对于同名的本机javascript对象，这可能会造成混淆）或者为什么您使用
$（self）
而不是本机
$（this）
，而不需要额外的代码？
<div id="gridContainer"><p>This paragraph contains the word Delivery<span class="deal_img"></span>.</p></div>
<div id="gridContainer"><p>This paragraph does not contain the key word<span class="deal_img"></span>.</p></div>
<div id="gridContainer"><p>This paragraph also contains the word Delivery<span class="deal_img"></span>.</p></div>
<div id="gridContainer"><p>Neither does this paragraph does not contain the key word<span class="deal_img"></span>.</p></div>

<script type="text/javascript">
$('div#gridContainer p:contains("Delivery") span.deal_img').append('image');
</script>