javascript - JS检查元素 block 是否包含一个或几个单词而不是运行代码的最佳方法

Question

我想检查一个元素 block 是否包含一个或几个单词并运行特定代码。

在一个主题中我需要插入一些链接。

这是 HTML:

<div>
<span class="nr">1</span>
<span class="block_subt">Element subtitle number one</span>
<a class="link" href="">Click here</a>
</div>
<div>
<span class="nr">2</span>
<span class="block_subt">Element subtitle number two</span>
<a class="link" href="">Click here</a>
</div>
<div>
<span class="nr">3</span>
<span class="block_subt">Element subtitle number three</span>
<a class="link" href="">Click here</a>
</div>

</div>

我想创建 if 语句来检查带有“block_subt”的 span 是否包含像“three”这样的工作，它会在它旁边附加一个指向 anchor 的链接。但也想覆盖多个 block 。这意味着覆盖另一个元素，如果它包含单词“三号”，则添加一个不同的链接到下一个 anchor 。如果另一个“block_subt”包含“two”附加一个不同的链接。

最好的方法是什么？

显然，多次使用一个代码不是一个好主意。另外，我在下面运行的代码将更改每个 anchor ，我只想更改包含此特定单词的 HTML 元素旁边的一个。

if ($(".block_subt:contains('Two')").length) {
        $(".link").attr("href", "http://www.google.com");
    }

这不是个好主意。有人可以给我一个关于这个的指示吗？

Answer 1

如果您确实采用了循环方式，则可以使用 .includes() 和 .next() 来查找匹配的文本位。此外，如果您想搜索多个单词，可以使用 .some() 方法。

var blocks = $('.block_subt');

blocks.each(function(i, div) {
  var text = $(div).text().replace("'", "").split(" ");
  var searchWords = ["number's", "one"];
  
  if (searchWords.some(word => text.includes(word))) {
    var a = $(this).next();
    $(a).attr("href", "http://www.google.com");
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- WILL MATCH -->
<div>
  <span class="nr">1</span>
  <span class="block_subt">Element subtitle number's one</span>
  <a class="link" href="">Click here</a>
</div>
<div>
  <span class="nr">1</span>
  <span class="block_subt">Element subtitle number one</span>
  <a class="link" href="">Click here</a>
</div>

<!-- WILL NOT MATCH -->
<div>
  <span class="nr">2</span>
  <span class="block_subt">Element subtitle numbers two</span>
  <a class="link" href="">Click here</a>
</div>
<div>
  <span class="nr">3</span>
  <span class="block_subt">Element subtitle numbered three</span>
  <a class="link" href="">Click here</a>
</div>

它有点冗长，但也许可以帮助您朝着正确的方向前进。