Question

<div id='foo'>
    <a><b>a</b></a>
    <a><b>b</b></a>
    <a><b>c</b></a>
</div>

$('#foo:contains("b")').text('bb');

我需要找到孩子obj的内容并替换其他内容但是上面的代码将替换id foo内部的所有内容。

我需要的是，如果#foo中包含'b'，则找到子元素并替换不同的字符串

Answer 1

使用选择器#foo b:contains("b")来选择b的{{1}}子项#foo b：

contains

$('#foo b:contains("b")').text('bb');
console.log($('#foo')[0].innerHTML);

如果您不知道标签名称，并且需要找到一个包含包含<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='foo'> <a><b>a</b></a> <a><b>b</b></a> <a><b>c</b></a> </div>的文本节点的元素，则要复杂一些，过滤包含至少一个b的元素这是具有childNode的文本节点：

const $allElementsThatContainB = $('#foo *:contains("b")');
const $elementsWhichImmediatelyContainB = $allElementsThatContainB.filter(function() {
  return [...this.childNodes].some(node => node.nodeType === 3 && node.textContent.includes('b'));
});
$elementsWhichImmediatelyContainB.text('bb');
console.log($('#foo')[0].innerHTML);

如果您只想查找innerHTML精确为 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='foo'> <a><b>a</b></a> <a><b>b</b></a> <a><b>c</b></a> </div>的元素，则更加简单：

const $allElementsThatContainB = $('#foo *:contains("b")');
const $elementsWhichImmediatelyContainB = $allElementsThatContainB.filter(function() {
  return this.innerHTML = 'b';
});
$elementsWhichImmediatelyContainB.text('bb');
console.log($('#foo')[0].innerHTML);

Answer 2

使用:last选择器

#foo:contains("b")-选择包含指定字符串的元素

#foo :contains("b")-选择包含指定字符串的子项

#foo :contains("b"):last-选择包含指定字符串的最后一个孩子

$('#foo :contains("b"):last').text('bb');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='foo'>
  <a><b>a</b></a>
  <a><b>b</b></a>
  <a><b>c</b></a>
</div>

要多个，请使用:last-child

$('#foo :contains("b")').find(':last-child').text('bb');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='foo'>
  <a><b>a</b></a>
  <a><b>b</b></a>
  <a><b>c</b></a>
  <a><b>b</b></a>
</div>

jQuery查找子对象包含并替换文本

2 个答案: