如何在第一个td包含某个词时，将class添加到第二个td？

Question

如果第一个中包含“ZERO”这个词，我该如何将第二个添加类？

$('td:nth-child(1):contains("ZERO")').closest('td:nth-child(2)').addClass('intro').removeClass('part-pakiet');  

- gainsky

---

你有 .next() 吗？ - Rajesh

Answer 1

使用相邻兄弟组合符号（+）：

使用相邻兄弟组合符号：

$("td:nth-child(1):contains(ZERO) + td").addClass('intro').removeClass('part-pakiet');

例子：

$("td:nth-child(1):contains(ZERO) + td").addClass('intro').removeClass('part-pakiet');

body {
  font-family: sans-serif;
}
table {
  border-collapse: collapse;
}
td, td {
  border: 1px solid #ddd;
}
.intro {
  color: green;
  font-weight: bold;
}

<table>
  <tbody>
    <tr>
      <td>first cell - no match</td>
      <td>second cell</td>
      <td>third cell with ZERO</td>
      <td>...to prove to ourselves this doesn't match</td>
    </tr>
    <tr>
      <td>first cell - ZERO</td>
      <td>second cell</td>
      <td>third cell with ZERO</td>
      <td>...to prove to ourselves this doesn't match</td>
    </tr>
    <tr>
      <td>first cell - no match</td>
      <td>second cell</td>
      <td>third cell with ZERO</td>
      <td>...to prove to ourselves this doesn't match</td>
    </tr>
    <tr>
      <td>first cell - ZERO</td>
      <td>second cell</td>
      <td>third cell with ZERO</td>
      <td>...to prove to ourselves this doesn't match</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- T.J. Crowder

---

这很不错，但就我个人而言，使用 next 更易读。 - Zoltán Tamási

@ZoltánTamási：我猜这取决于你的CSS水平。对于具有扎实的CSS选择器知识的人来说，这非常易读。当然，“next”也是一个完美的解决方案。 - T.J. Crowder

我在 CSS 方面表现得相当不错，但是我总是记不住相邻兄弟选择器的 方向 :) - Zoltán Tamási

@ZoltánTamási： :-) 如果这有帮助的话，它与所有其他组合器（例如后代组合器 div span）的方向相同。 - T.J. Crowder

Answer 2

在你的示例中，你错误地使用了closest。这里的closest是指与选择器匹配的最近祖先元素（如果当前元素匹配选择器，则为当前元素）。所以在这种情况下，你需要获取最接近的tr，然后是它的第二个td。以下是使用closest的有效代码。

$('td:nth-child(1):contains("ZERO")').closest('tr').find('td:nth-child(2)').addClass('intro').removeClass('part-pakiet'); 

但是，在这种情况下，您不需要使用closest，因为有一种更简单的方法，可以使用next选择器。

$('td:nth-child(1):contains("ZERO")').next().addClass('intro').removeClass('part-pakiet'); 

- Zoltán Tamási

---

我有一个（微不足道的）小问题：“*[closest] here refers to the closest* parent...”；closest()总是指最近的祖先元素（或者当前元素如果它匹配选择器），而绝不会是其他任何东西。 - David Thomas

@DavidThomas 谢谢，实际上我在寻找“祖先”这个词，但是它没有出现在我的脑海里（我的英语不是很好）。 - Zoltán Tamási

我不知道你的母语是什么，Zoltán，但我怀疑你讲的英语比我讲你的母语要好得多。让我感到困扰的不是祖先/父级之间的差异，而是在某些情况下closest()可能不会考虑到父级/祖先。就像我说的：“微不足道的小问题” :) - David Thomas

仅为完整起见，它是匈牙利语 :) - Zoltán Tamási

Answer 3

如果文本确实等于那个单词，可以采用更直接的方法。否则，请使用:contains伪类：

var tableElement = $('.table td:first-child'),
    wordToCheck  = 'ZERO';

if (tableElement.text() === wordToCheck) {
  tableElement.next().addClass('intro').removeClass('part-pakiet');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
    <tbody>
        <tr>
            <td>ZERO</td>
            <td class="part-pakiet"></td>
        </tr>
    </tbody>
</table>

- Jonathan P

Answer 4

你可以使用filter()函数来实现这个功能：

$('td').filter(function(){
    return ~$(this).prev('td').text().indexOf('ZERO'); // check if prev td contains 'ZERO' text
}).addClass('intro').removeClass('part-pakiet');

- four