每个函数内的 Javascript jQuery 数组函数

Question

我认为我遇到了范围问题。这是我的 html(我知道这是“坏”html，但它来自另一个来源):

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

这是我的 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"});
        }
    });
});

});

如果 b 标签内的文本与 stxts 数组值之一匹配，我想更改包含匹配的 b 标签的 tr 标签的背景颜色。 我究竟做错了什么？ 在 if 语句条件中，我尝试了 == 比较和 === 。 在 if 语句中，我尝试用 $("b") 替换 $(this) ，但没有结果。我尝试使用 for 循环而不是 $.each 但没有成功。 我确信我在“另一个函数内的函数”这件事上做错了。 感谢您抽出时间。

Answer 1

问题是$(this)在你的第二个里面.each()

您想要$(this)代表第一个.each()但自从你使用 $(this)在第二个.each()它代表那个。

将变量设置为 $(this)第一个里面.each()例如:var $this = $(this)并使用$($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>