时间戳

首页 > 解决方案 > Jquery查找子对象包含并替换文本

jquery - Jquery查找子对象包含并替换文本

问题描述

<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' 找到该子元素并替换不同的字符串

标签： jquery

解决方案

请改用选择器来#foo b:contains("b")选择 b 的b子代：#foocontains

$('#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该文本节点具有b：

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);
<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>

如果您只想查找其 innerHTML恰好 b为的元素，则更容易：

const $allElementsThatContainB = $('#foo *:contains("b")');
const $elementsWhichImmediatelyContainB = $allElementsThatContainB.filter(function() {
  return this.innerHTML = 'b';
});
$elementsWhichImmediatelyContainB.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>

推荐阅读