JQuery - Как добавить класс к элементу, в зависимости от того, что строка - PullRequest
Новая
       7

JQuery - Как добавить класс к элементу, в зависимости от того, что строка

0 голосов
/ 26 августа 2018

Используя jQuery, как добавить класс к элементу в таблице, в зависимости от того, что это за строка?

Например, у меня есть такая таблица: 

$('td:contains("Big pineapple!")').addClass('big-pineapple');
.big-pineapple {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table class="table-one">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Where are you</th>
        <th>What are you</th>
      </tr>
      <tr>
        <td>Alfreds</td>
        <td>Alfreds@Alfreds.com</td>
        <td>I'm here</td>
        <td>Big pineapple!</td>
      </tr>
      <tr>
        <td>Maria</td>
        <td>Maria@Maria.com</td>
        <td>I used to be there</td>
        <td>A lamp</td>
      </tr>
      <tr>
        <td>Anders</td>
        <td>Anders@Anders.com</td>
        <td>Why you ask</td>
        <td>Big pineapple!</td>
      </tr>
      <tr>
        <td>Island</td>
        <td>Island@Island.com</td>
        <td>I don't even know</td>
        <td>Big pineapple!</td>
      </tr>
      <tr>
        <td>Matt</td>
        <td>Matt@Matt.com</td>
        <td>Everywhere</td>
        <td>Not Big pineapple!</td>
      </tr>
    </table>

Поэтому я хочу добавить классы, основанные исключительно на том, что является строкой.Итак, в этом примере я могу добавить класс большой ананас к каждому полю, в котором есть текст большой ананас!

Я могу поймать его таким образом с помощью селектора содержит, ноЯ хотел бы сопоставить его, если это единственное, что есть в тексте (поэтому не в последней части, где текст не большой ананас! ).

1 Ответ

0 голосов
/ 26 августа 2018

Я не знаю, есть ли такой селектор, но вы можете сделать это с помощью filter и проверить html() каждого td. 

var f =$('td').filter(function(i,o) { return $(o).html() === 'Big pineapple!' });
f.addClass('big-pineapple');
.big-pineapple {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-one">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Where are you</th>
        <th>What are you</th>
      </tr>
      <tr>
        <td>Alfreds</td>
        <td>Alfreds@Alfreds.com</td>
        <td>I'm here</td>
        <td>Big pineapple!</td>
      </tr>
      <tr>
        <td>Maria</td>
        <td>Maria@Maria.com</td>
        <td>I used to be there</td>
        <td>A lamp</td>
      </tr>
      <tr>
        <td>Anders</td>
        <td>Anders@Anders.com</td>
        <td>Why you ask</td>
        <td>Big pineapple!</td>
      </tr>
      <tr>
        <td>Island</td>
        <td>Island@Island.com</td>
        <td>I don't even know</td>
        <td>Big pineapple!</td>
      </tr>
      <tr>
        <td>Matt</td>
        <td>Matt@Matt.com</td>
        <td>Everywhere</td>
        <td>Not Big pineapple!</td>
      </tr>
    </table>
...