1

Есть страница на которой есть несколько пунктов Li, в этих Li пользователи могут оставить (из админки) много текста, текст разбит на абзацы. Задача - в каждом пункте Li, каждому абзацу начиная со второго добавить класс accordeon__inner. Вот черновик - https://codepen.io/Jackkill/pen/qVmpxM (для наглядности того, что должно получится классы для абзацов я по расставлял в ручную)

Как я думаю это реализовать:

1)Нахожу все ЛИ в данном аккордеоне.

allLi = $('.accordeon__list').find('.accordeon__item')

2)Узнаю их количество, поскольку пользователь может много пунктов на создавать.

allLiLength = allLi.length

3)Чтобы заглянуть в каждую ЛИ (количество которых я не знаю) я создаю счетчик.

for (i = 0; i < allLiLength; i++) {
  allLi[i]
}

4)А дальше думаю как бы выбрать всех детей после n...

Дальше я пробовал воспользоваться методом .children() но я незнаю как выбрать "все после определенного". Так-же смотрел в сторону селлектора :gt(1).

$('.accordeon__item p:gt(1)').addClass('accordeon__inner');

Вот таким образом я получаю нужный класс accordeon__inner для абсолютно всех абзацев после второго. Что тоже не совсем то (((

Подскажите пожалуйста как данную штуку реализовать?

1
  • for (i = 0; i < allLiLength; i++) { allLi[i] } вот здесь если i > n вешаете класс
    – user271410
    13 ноя 2017 в 0:10

3 ответа 3

2

Есть интересный псевдокласс nth-child, с помощью которого не нужен даже JS.
В примере стилем изменяется фон, а кодом - цвет шрифта:

Array.from(document.querySelectorAll('li > p:nth-child(n + 2)')).forEach(e => e.classList.add('accordeon__inner'))
ul{
  padding: 0; margin: 0;
  list-style: none;
}
li{
  background: #f3f3f3;
  padding: 1px 10px;
  margin-top: 10px;
  border-radius: 4px;
}
.accordeon__inner{
  color: #6a1cff;
}


li > p:nth-child(n + 2){
  background: #4590ff30;
}
<!-- ul>li*5>p{Item #$$}*4 -->
<ul>
	<li>
		<p>Item #01</p>
		<p>Item #02</p>
		<p>Item #03</p>
		<p>Item #04</p>
	</li>
	<li>
		<p>Item #01</p>
		<p>Item #02</p>
		<p>Item #03</p>
		<p>Item #04</p>
	</li>
	<li>
		<p>Item #01</p>
		<p>Item #02</p>
		<p>Item #03</p>
		<p>Item #04</p>
	</li>
	<li>
		<p>Item #01</p>
		<p>Item #02</p>
		<p>Item #03</p>
		<p>Item #04</p>
	</li>
	<li>
		<p>Item #01</p>
		<p>Item #02</p>
		<p>Item #03</p>
		<p>Item #04</p>
	</li>
</ul>

1
  • Благодарю, то что надо) Псевдоклассы я часто использую, а вот в JS я пока не силен. 14 ноя 2017 в 10:39
0

Дополняя ответ "Other" и исходя из предложенного кода можно например так (JSFidge: https://codepen.io/Flyer3d/pen/BmRbwP):

for (i = 0; i < allLiLength; i++) {
  var curLi = allLi[i];
  $(curLi).children('li > p:nth-child(n + 2)').addClass('accordeon__inner');
}
0

каждому абзацу начиная со второго добавить класс accordeon__inner

$('.accordeon__list .accordeon__item p + p').addClass('accordeon__inner')
3
  • Ну... вайнот? :)
    – user207618
    13 ноя 2017 в 14:08
  • Как вариант, спасибо. Я ввел вас в заблуждение... написал со второго имея введу что в JS счет начинается с 0 :) 14 ноя 2017 в 10:42
  • @EugeneGellert, p + p + p :D
    – Qwertiy
    14 ноя 2017 в 12:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.