在元素jQuery

Question

我在容器中有几个span元素，我想匹配其中一个跨度的确切单词以插入横幅。我无法弄清楚如何做到这一点。

首先我尝试了这个脚本：

$(document).ready(function(){
 if ($('.head.titlebox span').text().trim() === "match" ){
 $('<span class="myAwesomeBanner4"></span>').insertAfter(".productbox em.price.product-card-price")
 }
else if ($('.head.titlebox span').text().trim() === "matchother" ){
$('<span class="myAwesomeBanner5"></span>').insertAfter(".productbox em.price.product-card-price")
}
});

这不起作用 - 除非我删除它应匹配的字符串：===＆＃34;＆＃34;。所以脚本似乎kike它有点工作。虽然我无法将它与单词相匹配 - 看起来对我来说是正确的，所以不确定它为什么不起作用。

然后我尝试了这个有效的脚本 - 但我无法弄清楚如何将其转换为使用if语句并创建我的div以在DOM中插入如上所述：

$('.head.titlebox span').filter(function(index) { 
return $(this).text() === "match";}).css("background", "black"); 

我的HTML用于定位字符串：

<div class="head titlebox">
 <span id="artid">text</span><h1 id="prod-title">text</h1>
 <span>text</span><span>text</span>
 <span>match</span>
</div>

那么为什么第一个不起作用 - 如何将它与第二个脚本的工作过滤器功能结合起来呢？

Answer 1

您需要遍历所有span标记，

$('.head.titlebox span').each(function() {
   if ($(this).text() == "match") {
      //insert your html.
   }
})

Answer 2

试试这个：

＆＃13;

＆＃13;

C

＆＃13;

$(".head").on("click", function() {
  var spanList = $(".head span");
  $.each(spanList,function(span){
      console.log($(spanList[span]).text());
      if($(spanList[span]).text() === "match"){
      	console.log("Matched")
      }
  });
})

＆＃13;

＆＃13;

＆＃13;