Как выбрать всех детей после n

278
13 ноября 2017, 22:34

Есть страница на которой есть несколько пунктов 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 для абсолютно всех абзацев после второго. Что тоже не совсем то (((

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

Answer 1

Есть интересный псевдокласс 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>

Answer 2

Дополняя ответ "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');
}
Answer 3

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

$('.accordeon__list .accordeon__item p + p').addClass('accordeon__inner')
Answer 4

Если правильно понял суть задачи, то можно вот так, замените функцию на код JS код с ответа.

Если ко всем элементам после 2-х accordeon__item добавлять классы accordeon__inner то вот:

Код Jquery:

$('li.accordeon__item p').each(function( i ) { 
     if (i > 1) { 
         $(this).addClass('accordeon__inner'); 
     } 
});

Если через каждые 2-а li accordeon__item добавлять классы accordeon__inner то вот:

Код Jquery:

$('.accordeon__list').find('.accordeon__item').each(function( index ) { 
    $(  $(this).find('p') ).each(function( i ) {    
        if (i > 1) {
            $(this).addClass('accordeon__inner');
        }
    }); 
});

Тот же код без использования $.each: Для тех кто как @Herrgott недолюбливают цикл each.

allLi = $('.accordeon__list').find('.accordeon__item'); 
allLiLength = allLi.length;
    for (i = 0; i <= allLiLength; i++) {  
     lenght_for = $(allLi[i]).find('p').length-1; 
      for ( o = 0; o <= lenght_for;  o++) {    
        if (o > 1) {
          $($(allLi[i]).find('p')[o]).addClass('accordeon__inner');
        } 
      } 
    }


(function($) {   
 
$('.accordeon__list').find('.accordeon__item').each(function( index ) {  
    $(  $(this).find('p') ).each(function( i ) {     
        if (i > 1) { 
            $(this).addClass('accordeon__inner'); 
        } 
    });  
}); 
  
    $('.js-accordeon__trigger').on('click', function(event) { 
        event.preventDefault(); 
         
        var $this = $(this), //сохраняем в переменные все с чем будем работать 
            item = $this.closest('.accordeon__item'), 
            list = $this.closest('.accordeon__list'), //весь наш список 
            items = list.find('.accordeon__item'), // все ли вехнего уровня 
         
            content = item.find('.accordeon__inner'),// весь внутренний список который будет открыватся 
            otherContent = list.find('.accordeon__inner'), // все ли с контентом 
            duration = 300; // время за которое пройдет анимация 
         
        if (!item.hasClass('active')){   //если у конкретного ли нет активного класса 
            items.removeClass('active'); //удалить активные классы у других ли 
            item.addClass('active');     //и присвоить актив этому конкретному ли 
            otherContent.stop(true, true).slideUp(duration); //свернуть все ли с контентом 
            content.stop(true, true).slideDown(duration); //развернуть тот у кого активный класс 
        } else { 
            content.stop(true, true).slideUp(duration);  
            items.removeClass('active');                 
        }                                                
     
    });   
 
	})( jQuery );
.accordeon { 
    padding: 50px; 
} 
 
.accordeon__trigger { 
    color: #333; 
    display: block; 
    padding: 6px; 
    text-decoration: underline; 
  cursor: pointer; 
} 
 
.accordeon__inner { 
   padding: 0px; 
} 
 
.accordeon__item { 
    list-style: none; 
} 
.accordeon__inner p { 
  margin-top: 0px; 
} 
 
.accordeon__inner-item { 
    list-style: none; 
    margin-bottom: 2px; 
} 
 
.accordion__inner-link { 
    text-decoration: none; 
    color: #34495e; 
    border-bottom: 1px dotted #34495e; 
} 
 
.accordeon__inner { 
    display: none; 
}  
     
.accordeon__trigger:before{ 
  content: "read more"; 
  display: block; 
  font-size: 17px; 
} 
.active .accordeon__trigger:before{ 
  content: "less"; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="accordeon"> 
<ul class="accordeon__list"> 
<!-- 	first Item --> 
<li class="accordeon__item"> 
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero maxime error  quidem officiis porro eligendi iste dolores dolor magni, repellendus molestias totam, aliquid quasi molestiae soluta esse dignissimos corporis iure.</p> 
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero maxime error  quidem officiis porro eligendi iste dolores dolor magni, repellendus molestias totam, aliquid quasi molestiae soluta esse dignissimos corporis iure.</p> 
   <!--    Все что в этой обертке будет скрыватся 
  	<div class="accordeon__inner"> </div> --> 
			   
		<p class="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero maxime error  quidem officiis porro eligendi iste dolores dolor magni, repellendus molestias totam, aliquid quasi molestiae soluta esse dignissimos corporis iure.</p> 
  <p class="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero maxime error  quidem officiis porro eligendi iste dolores dolor magni, repellendus molestias totam, aliquid quasi molestiae soluta esse dignissimos corporis iure.</p> 
		  
		 
		<a href="#" class="accordeon__trigger js-accordeon__trigger"></a> 
	</li> 
<!-- 	first Item end -->	 
<!-- 	second Item --> 
<li class="accordeon__item"> 
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero maxime error  quidem officiis porro eligendi iste dolores dolor magni, repellendus molestias totam, aliquid quasi molestiae soluta esse dignissimos corporis iure.</p> 
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero maxime error  quidem officiis porro eligendi iste dolores dolor magni, repellendus molestias totam, aliquid quasi molestiae soluta esse dignissimos corporis iure.</p>   
		<p class="">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero maxime error  quidem officiis porro eligendi iste dolores dolor magni, repellendus molestias totam, aliquid quasi molestiae soluta esse dignissimos corporis iure.</p> 
			   
		<a href="#" class="accordeon__trigger js-accordeon__trigger"></a> 
	</li> 
<!-- 	second Item end --> 
</ul> 
</div>

READ ALSO
Как в sublimeText - sublimeREPL,передавать в интерпретатор php файлы php
PHP

Как в sublimeText - sublimeREPL,передавать в интерпретатор php файлы php

Проблема с плагином для sublime text - sublimeREPL

 291
Считывание данных из файла
PHP

Считывание данных из файла

Нужно сделать интернет магазин, данные для которого считываются из файлаСтруктура файла представлена на картинке

 286
Как реализовать подключение к БД через синглтон
PHP

Как реализовать подключение к БД через синглтон

Всем приветЕсть модель (если можно так назвать), состоящая из статичных методов

 422
Редактирование записей в бд
PHP

Редактирование записей в бд

Добрый деньНеобходимо производить редактирование данных в базе данных

 218