CSS-查找行后突出显示TD元素

Question

我试图在找到该行之后突出显示一些TD元素。我设法通过两个不同的步骤找到了行和TD元素（评论"工作正常"）。我想将两个步骤组合在一个内部的循环中，但它不起作用。

$(document).ready(function() {
  var dt = ['2017-11-02', '2017-11-03'];
  cell = $('td:contains("value1")');
  // works OK
  $(cell).css({
    color: "red",
    border: "2px solid red"
  });
  for (var i = 0; i < dt.length; i++) {
    // works OK
    $('[data-date="' + dt[i] + '"]').css({
      background: "blue",
      color: "white"
    });
    // Not Working
    //$('td:contains("value1")').find('[data-date="' + dt[i] + '"]').css({background:"blue", color:"white"});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <td>text1</td>
      <td>value1</td>
      <td data-date="2017-11-01">1</td>
      <td data-date="2017-11-02">2</td>
      <td data-date="2017-11-03">3</td>
      <td data-date="2017-11-04">4</td>
    </tr>
    <tr>
      <td>text2</td>
      <td>value2</td>
      <td data-date="2017-11-01">1</td>
      <td data-date="2017-11-02">2</td>
      <td data-date="2017-11-03">3</td>
      <td data-date="2017-11-04">4</td>
    </tr>
</div>

问候，Elio Fernandes

Answer 1

您可以替换

$('[data-date="' + dt[i] + '"]').css({

$(cell).parent().children('[data-date="' + dt[i] + '"]').css({

您可以用查找替换儿童，然后用$（cell）.parent（）以另一种方式专注于tr。

$(document).ready(function() {
  var dt = ['2017-11-02', '2017-11-03'];
  cell = $('td:contains("value1")');
  // works OK
  $(cell).css({
    color: "red",
    border: "2px solid red"
  });
  for (var i = 0; i < dt.length; i++) {
    // works OK
    $(cell).parent().children('[data-date="' + dt[i] + '"]').css({
      background: "blue",
      color: "white"
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <td>text1</td>
      <td>value1</td>
      <td data-date="2017-11-01">1</td>
      <td data-date="2017-11-02">2</td>
      <td data-date="2017-11-03">3</td>
      <td data-date="2017-11-04">4</td>
    </tr>
    <tr>
      <td>text2</td>
      <td>value2</td>
      <td data-date="2017-11-01">1</td>
      <td data-date="2017-11-02">2</td>
      <td data-date="2017-11-03">3</td>
      <td data-date="2017-11-04">4</td>
    </tr>
</div>