javascript - How can I add class to second td if the first one contains some word? - Stack Overflow

admin管理员组

文章数量:1404923

How can I add class to second td if the first one contains word ZERO?

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

How can I add class to second td if the first one contains word ZERO?

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

• javascript
• jquery

Share Improve this question Follow asked Oct 27, 2016 at 10:42 gainskygainsky 1751010 bronze badges 1

• have you .next(). – Rajesh Commented Oct 27, 2016 at 10:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Use an adjacent sibling binator (+):

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

Example:

$("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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In your sample, you use closest incorrectly. Closest here refers to the closest ancestor element matching the selector (or the current element if it matches the selector). So in this case you have to get the closest tr, and then its second td. For the record, here is a working code using closest.

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

However, in this scenario you don't need to use closest, because there is a simpler way using next selector.

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

More literal approach if the text is definitely equal to that word. Other wise use the :contains pseudo:

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

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

<script src="https://ajax.googleapis./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>

You can use the filter() function for this:

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

本文标签： javascriptHow can I add class to second td if the first one contains some wordStack Overflow