jQuery - div:contains not working

Question

如果div中有特定的短语，我正在尝试让jquery自动填充输入

这是我到目前为止所拥有的....

<li>
<div>
<div class="gfield_admin_header_title">Orange</div>
<div>
<ul>
<li><input type="text" id="field_css_class" /></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="gfield_admin_header_title">Apple</div>
<div>
<ul>
<li><input type="text" id="field_css_class" /></li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div>
<div class="gfield_admin_header_title">Pear</div>
<div>
<ul>
<li><input type="text" id="field_css_class" /></li>
</ul>
</div>
</div>
</div>
</li>
$("div > div:contains('Orange')").find("#field_css_class").val('DesiredVal');

如果我使用...

$("div").find("#field_css_class").val('DesiredVal');

然后它确实更改了输入，但对 #field_css_class 的所有实例执行此操作(如预期的那样)

所以我假设它不喜欢我的div：contains，谁能帮忙？

Answer 1

第一个 id必须是唯一的，因此请使用field_css_class作为类属性，而不是将其用作 id

$("div").has('> div:contains("Orange")').find(".field_css_class").val('DesiredVal');

演示：小提琴

问题是元素field_css_class不是包含文本Orange的div的后代，而是同级元素的后代

注意：在标记中，每个li元素的末尾都有一个额外的</div>

Answer 2

我认为你应该使用这个类，因为 id 不建议重复，你可以直接使用它

$(".className").val("value")

Answer 3

您可以使用：

$.each($('.gfield_admin_header_title'), function () {
if ($(this).text() == "Orange") {
$(this).next().find('.field_css_class').val('DesiredVal');
};
});

一些注意事项：

1)id应该是唯一的，你应该使用类代替(在这种情况下.field_css_class)

2)您的HTML标记似乎错误，在每个li中，您在最后div之前有多余的结束</div>标记

3)上面的代码检查预期div中的文本是否为橙色，如果是，则更改下一个input值。

小提琴演示