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跨度为真。

if上面的当前代码检查跨度的文本是否完全匹配。

Answer 2

您可以使用includes()函数，例如：

$(document).ready(function() {
  var partTitle = $("#product_title").text();

  $("span").each(function(i) {
    if ($(this).text().includes(partTitle)) {
      $(this).css("color", "green");
    } else {
      $(this).css("color", "red");
    }
  });
});

<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>5/8 Other Stuff</span> 
</label>

<label class="radio-option">
  <span>1/8</span> 
</label>

<label class="radio-option">
  <span>1/2</span> 
</label>

Answer 3

如果要检查标题字符串includes是否分别为span文本，请检查下一个示例：

$(document).ready(function()
{
    var partTitle = $("#product_title").text();

    $("span").each(function(i)
    {
        if ( partTitle.includes($(this).text()) )
        {
            $(this).fadeOut(2000);
            // Alternatively you can use hide, like on next line.
            // fadeOut() was used because it gives more time to
            // see it working.
            //$(this).hide();
        }
     });
 });

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

在您要检查span文本是否包含header文本的情况下，可以实现类似的逻辑：

$(document).ready(function()
{
    var partTitle = $("#product_title").text();

    $("span").each(function(i)
    {
        if ( $(this).text().includes(partTitle) )
        {
            $(this).fadeOut(2000);
            // Alternatively you can use hide, like on next line.
            // fadeOut() was used because it gives more time to
            // see it working.
            //$(this).hide();
        }
     });
 });

<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 Other Stuff</span>
</label>

<label class="radio-option">
  <span>1/8</span>
</label>

<label class="radio-option">
  <span>1/2</span>
</label>

Answer 4

使用.filter()首先缩小匹配元素的范围。
比将.css({display: "none"})应用于过滤后的集合

jQuery(function($) {

  var partTitle = $("#product_title").text();

  $(".radio-option span")
    .filter((i, el) => partTitle.includes(el.textContent))
    .css({display: "none"});

});

<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>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

或者更好，而不是.css({display: "none"})使用一些CSS Utility 类，例如：

.addClass("u-none");

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

4 个答案: