如何使用 div 中的内容定位 div

Question

我有 2 个 div 具有相同的 class 名称，但 div 中的字符串不同。我想在第一个 div 之后使用 insertAfter 来显示一些额外的文本，但是文本显示在两个 divs:

下

<div class='test'>First Div</div>
<div class='test'>Second Div</div>

我的做法：


if ( document.getElementsByClassName('test')[0] 
  && document.getElementsByClassName('test')[0].innerHTML == 'First Div'
   ) {
     $('<h2>Inserting New Text</h2>').insertAfter('.test')[0];
   }

但这会在第一个 Div 和第二个 Div 之后添加文本。我想知道有没有办法只插入一次或者匹配字符串后插入

Answer 1

保持简单，找到目标为 class 的所有元素并选择第一个：

const el = document.getElementsByClassName('test')
$('<div>new text</div>').insertAfter(el[0])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='test'>First Div</div>
<div class='test'>Second Div</div>

Answer 2

你可以让javascript求出class的元素，然后将结果转成数组，找到符合条件的第一个元素。

const elements = Array.from(document.getElementsByClassName("test"));

const target = elements.find(el => el.innerHTML === 'First Div');

$('<h2>Inserting New Text</h2>').insertAfter(target);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='test'>First Div</div>
<div class='test'>Second Div</div>

Answer 3

这里不需要jQuery。使用 insertAdjacentHTML 添加新元素。

// Pick up the first element with the test class
const el = document.querySelector('.test');

// Use `insertAdjacentHTML` to add the new div after it
el.insertAdjacentHTML('afterend', '<div>new text</div>');

<div class="test">First Div</div>
<div class="test">Second Div</div>

如何使用 div 中的内容定位 div

How to target a div using content inside the div

javascript

jquery

insertafter