Javascript jQuery array function inside each function

Question

I think I have a scope problem. This is my html (I know is "bad" html, but it comes as is from another source):

<table>
    <tr>
        <td>
            <div><b>blablabla <span>some text</span></b></div>
        </td>
    </tr>
    <tr>
        <td>
            <div><b><span>this is another text</span></b></div>
        </td>
    </tr>
    <tr>
        <td>
            <div><b>blablabla <span>this is</span> <span>one more text</span></b></div>
        </td>
    </tr>
</table>

and this is my javascript

$(document).ready(function() {      
// delete all span in b
$('b span').contents().unwrap();
// delete "blablabla"
$("b:contains('blablabla')").html(function(i, text) {
    return text.replace(/blablabla/g, '');
});

$("b").each(function() {
    var bcont = $(this).text();
    var stxts = [ "this is another text", "this should not match" ];
    $.each(stxts, function(i, val) {
        alert($("b").text());
        if ( bcont == val) {
            $(this).closest("tr").css({"background" : "green"});
        }
    });
});

});

If text inside the b tag matches one of the stxts array values, I want to change the background color of the tr tag containing the b tag that matches. What am I doing wrong? In the if statement condition I've tried the == comparison and the === . Inside the if statement I've tried replacing $(this) with $("b"), with no result. Instead of the $.each I've tried with a for loop with no luck. I'm sure I'm doing it wrong with the "function inside another function" thing. Thanks for your time.

@SPlatten You are right, I should learn to work with error handling for a better result. What would you suggest for the code we are examining? — Sarpo
– Sarpo, Commented Jun 26, 2017 at 14:04
@Sarpo, always check the function return codes before using, same goes for function parameters, always assume that they may be invalid and check. — SPlatten
– SPlatten, Commented Jun 26, 2017 at 14:06

Carsten Løvbo Andersen · Accepted Answer · 2017-06-26 11:03:02Z

1

The problem is $(this) inside your second .each()

You want $(this) to represent the first .each() but since your using $(this) in the second .each() it represents that one.

make a variable of $(this) inside the first .each() like: var $this = $(this) and use $($this).closest("tr").css({"background-color": "green"});

$(document).ready(function() {
  // delete all span in b
  $('b span').contents().unwrap();
  // delete "blablabla"
  $("b:contains('blablabla')").html(function(i, text) {
    return text.replace(/blablabla/g, '');
  });

  $("b").each(function() {
    var $this = $(this)
    var bcont = $(this).text().trim();
    var stxts = ["this is another text", "this should not match"];
    $.each(stxts, function(i, val) {
      if (bcont == val) {
        $($this).closest("tr").css({
          "background": "green"
        });
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div><b>blablabla <span>some text</span></b></div>
    </td>
  </tr>
  <tr>
    <td>
      <div><b><span>this is another text</span></b></div>
    </td>
  </tr>
  <tr>
    <td>
      <div><b>blablabla <span>this is</span> <span>one more text</span></b></div>
    </td>
  </tr>
</table>

answered Jun 26, 2017 at 11:03

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sarpo Over a year ago

you rule, in fact I've tried to invert the functions (put the "b" each inside the "array" each) and it worked. Anyway yours is a solution mine was only a trick. What about the comparison operator? Should I use the equal or the identical one?

Carsten Løvbo Andersen Over a year ago

@Sarpo I dont see any problems in using equal operator. if it works fine just use that

Collectives™ on Stack Overflow

Javascript jQuery array function inside each function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related