Question

我试图突出显示表中的行，其中某些行在$（document）.ready上分配了特定的类。想到将.closest与tr一起使用将只获取相应的行，但是它可以全部获取，我不确定为什么。

我已经尝试了很多事情，但是请注意，我只是想按照教程/示例进行操作，我不是一个精打细算的人，对此很不满意，但是我在这里。

<table class="views-table cols-3" >
<thead>
<tr>
<th class="views-field views-field-created" scope="col">Upload Date</th>
<th class="views-field views-field-filename" scope="col">Name/File</th>
<th class="views-field views-field-path" scope="col">Download</th>
</tr>
</thead>
<tbody>
<tr class="odd views-row-first">
<td class="views-field views-field-created">October 09, 2017</td>
<td class="views-field views-field-filename"><a href="http://example.com/sample_0.pdf">sample_0.pdf</a></td>
<td class="views-field views-field-path" ><a href="/345" class="">Download</a></td>
</tr>
<tr class="even views-row-last">
<td class="views-field views-field-created">January 16, 2019</td>
<td class="views-field views-field-filename"><a href="http://example.com2344234_0.pdf">2344234.pdf</a></td>
<td class="views-field views-field-path" ><a href="/445" class="1">Download</a></td>
</tr>
</tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script type="text/javascript">
$(document).ready(function() { 
    if ($("a").hasClass("1")) {
    $("a").closest('tr').css('background-color', 'blue');
    }
}); 
</script>

整个表中还有很多行，但是为了保持整洁，您可以看到这里只有两个表行，其中后者有一个链接，链接为class =“ 1”。

我只想标识那些锚定类= 1的THOSE行，然后在这里变成蓝色，但最终却全部完成了（或者当我将其破坏得更多时，它们什么也没做。）

我需要在这里运行循环吗？ .closest在这里使用不合适吗？我尝试了一些家长推荐，但没有运气。

抱歉，这是基本步骤，但是我不确定在这里做什么。

Answer 1

您的代码无法正常工作的原因是您在.closest上调用a，作为选择器，它与您刚刚测试的条件无关。

换句话说：$('a').closest('tr')始终是每个链接中最接近的<tr>。

您可以简单地使用以下行，而使用class selectors：

$('a.1').closest('tr').css('background-color', 'blue');

演示：

<!DOCTYPE html>
<html>

<body>
  <table class="views-table cols-3">
    <thead>
      <tr>
        <th class="views-field views-field-created" scope="col">Upload Date</th>
        <th class="views-field views-field-filename" scope="col">Name/File</th>
        <th class="views-field views-field-path" scope="col">Download</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd views-row-first">
        <td class="views-field views-field-created">October 09, 2017</td>
        <td class="views-field views-field-filename"><a href="http://example.com/sample_0.pdf">sample_0.pdf</a></td>
        <td class="views-field views-field-path"><a href="/345" class="">Download</a></td>
      </tr>
      <tr class="even views-row-last">
        <td class="views-field views-field-created">January 16, 2019</td>
        <td class="views-field views-field-filename"><a href="http://example.com2344234_0.pdf">2344234.pdf</a></td>
        <td class="views-field views-field-path"><a href="/445" class="1">Download</a></td>
      </tr>
    </tbody>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('a.1').closest('tr').css('background-color', 'blue');
    });
  </script>
</body>

</html>

Answer 2

在jQuery中使用.each：

$(document).ready(function() { 
    $( "a" ).each(function() {
        if ($( this ).hasClass("1")) {
          $( this ).closest('tr').css('background-color', 'blue');
        }         
    });
});

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <table class="views-table cols-3">
    <thead>
      <tr>
        <th class="views-field views-field-created" scope="col">Upload Date</th>
        <th class="views-field views-field-filename" scope="col">Name/File</th>
        <th class="views-field views-field-path" scope="col">Download</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd views-row-first">
        <td class="views-field views-field-created">October 09, 2017</td>
        <td class="views-field views-field-filename"><a href="http://example.com/sample_0.pdf">sample_0.pdf</a></td>
        <td class="views-field views-field-path"><a href="/345" class="">Download</a></td>
      </tr>
      <tr class="even views-row-last">
        <td class="views-field views-field-created">January 16, 2019</td>
        <td class="views-field views-field-filename"><a href="http://example.com2344234_0.pdf">2344234.pdf</a></td>
        <td class="views-field views-field-path"><a href="/445" class="1">Download</a></td>
      </tr>
    </tbody>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("a").each(function() {
        if ($(this).hasClass("1")) {
          $(this).closest('tr').css('background-color', 'blue');
        }
      });
    });
  </script>
</body>

</html>

.closest与：包含比我想要的更多的选择？

2 个答案: