Применить общий класс к тегам html на основе некоторого условия, используя jquery - PullRequest
Новая
       63

Применить общий класс к тегам html на основе некоторого условия, используя jquery

1 голос
/ 07 августа 2020

У меня есть что-то вроде этого - 

<body>
<p >PARA1</p>
<p >PARA2</p>
<p>PARA3</p>
<p>PARA4</p>
<p>PARA5</p>
<p>PARA6</p>
<button>REMOVE</button>
</body>

Я хочу добавить «новый» класс ко всем абзацам после четвертого, используя Jquery. Мой код - 

$.each($('p').index > 4, function() {
                              $('p').addClass('new')
                            });

Кто-нибудь может подсказать мне, как исправить этот код?

Ответы [ 4 ]

3 голосов
/ 07 августа 2020

Вы можете использовать псевдоселектор :nth-child(n+5) для выбора 4-го потомка: 

$('p:nth-child(n+5)').addClass('new');

Использование nth-child для стилизации элемента 4 и далее

1 голос
/ 07 августа 2020

Если вы хотите использовать l oop для выполнения дополнительных операций вместе с добавлением класса new . 

$('p').each((i, para) => {
  if (i > 3) {
    $(para).addClass('new')
    // some other operations
  }
})
.new {
  color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
    <p>PARA1</p>
    <p>PARA2</p>
    <p>PARA3</p>
    <p>PARA4</p>
    <p>PARA5</p>
    <p>PARA6</p>
    <button>REMOVE</button>
</body>
1 голос
/ 07 августа 2020

Метод slice позволяет выбрать все элементы, которые больше или равны указанному индексу. 

$('p').slice(4).addClass('new');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
    <p>PARA1</p>
    <p>PARA2</p>
    <p>PARA3</p>
    <p>PARA4</p>
    <p>PARA5</p>
    <p>PARA6</p>
    <button>REMOVE</button>
</body>
0 голосов
/ 07 августа 2020

Вы можете попробовать 

  $("p").slice(4).addClass("new");

Фильтр срезов выбирает подмассив, начиная с n-го элемента возвращаемых jquery объектов

https://api.jquery.com/slice/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...