CODEWITHSUNDEEP
jqueryloops
Holly Williford
Holly Williford

Reputation: 80

How to check text when iterating through loop of elements

Trying to create a script that iterates through each span to check if it :contains the same text as the h1 element of a page. 

$(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:

Upvotes: 3

Views: 317

Answers (4)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could use includes() function like:

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

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

Use .filter() to first narrow the collection of matching elements.
Than apply .css({display: "none"}) to the filtered collection

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>

or better yet, instead of .css({display: "none"}) use some CSS Utility class like:

.addClass("u-none");

Upvotes: 1

Shidersz
Shidersz

Reputation: 17190

If you want to check if the header string includes the span text in each case, check the next example:

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

A similar logic can be implemented in the case you want to check if the span text includes the header text:

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

Upvotes: 1

ekr990011
ekr990011

Reputation: 744

So do you want to see if the text in the spans match exactly or if they have parts that are within your 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>

If you are just checking to see if your spans contain any text within partTitle you can do:

$(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 {

    }

  });
});

The console.log contains how to check if any of them have some of the text within the h1, so the 5/8 span is true.

The current code in the if above checks if the span's text matches exactly.

Upvotes: 2

Related Questions