jquery - 如何在遍历元素循环时检查文本

Question

尝试创建一个脚本来迭代每个跨度以检查它是否包含与页面的 h1 元素相同的文本。

$(document).ready(function() {
  var partTitle = $("#product_title").text();

  $("span").each(function(i) {
    if ($(this).text().is(":contains('" + partTitle + "')")) {
      $(this).css = ("display", "none");
    } else {

    }

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="page_headers" id="product_title">5/8 Other Stuff</h1>

<label class="radio-option">
 <span>5/8</span> 
</label>

<label class="radio-option">
 <span>1/8</span> 
</label>

<label class="radio-option">
 <span>1/2</span> 
</label>

Codepen:

Answer 1

那么您想查看跨度中的文本是否完全匹配，或者它们是否包含您的partTitle 内的部分？

<h1 class="page_headers" id="product_title">5/8 Other Stuff</h1> 
<label class="radio-option">
  <span>5/8</span> 
</label> 
<label class="radio-option">
  <span>1/8</span> 
</label> 

<label class="radio-option">
  <span>1/2</span> 
</label>

如果您只是检查您的跨度是否包含partTitle中的任何文本，您可以执行以下操作:

$(document).ready(function() {
 var partTitle = $("#product_title").text();

  $("span").each(function( i ) {
     console.log(partTitle.includes($(this).text()));
     if ($(this).text().includes(partTitle)) {  
      console.log('hi');
      $(this).css = ("display", "none"); 
    } else {

    }

  });
});

console.log 包含如何检查它们中的任何一个是否在 h1 内包含某些文本，因此 5/8 跨度为 true。

上面 if 中的当前代码检查范围的文本是否完全匹配。