ПитерСайт » Блог » Выбрать все заданные соседние элементы между двумя другими заданными соседними элементами в JavaScript

Выбрать все заданные соседние элементы между двумя другими заданными соседними элементами в JavaScript

Выбор всех заданных соседних элементов между двумя другими заданными соседними элементами с помощью JavaScript + CSS.

Пример: цвет текста только тех абзацев (но не div), которые располагаются между первым и вторым заголовками, меняется на красный:

HTML код:

<div class="example">
	<p>абзац</p>
	<div>div</div>
	<h2>Первый заголовок</h2>
	<div>div</div>
	<p>абзац</p>
	<div>div</div>
	<p>абзац</p>
	<h2>Второй заголовок</h2>
	<p>абзац</p>
	<div>div</div>
	<h2>Другой заголовок</h2>
	<p>абзац</p>
	<div>div</div>
</div>

JavaScript код:

<script>
var container = '.example';
var paragraph = 'p';
var heading_1 = 'h2:nth-of-type(1)';
var heading_2 = 'h2:nth-of-type(2)';
// var the_paragraphs = document.querySelectorAll( '.example h2:nth-of-type(1) ~ p:not( h2:nth-of-type(2) ~ p )' );
var the_paragraphs = document.querySelectorAll(' '+container+' '+heading_1+' ~ '+paragraph+':not( '+heading_2+' ~ '+paragraph+' ) ');

for ( var the_paragraph of the_paragraphs ) {
	the_paragraph.classList.add('red');
}
</script>

CSS код:

.red {color: #c00;}

Поддержка в браузерах

• Windows: Google Chrome 1.0+, Firefox 3.5+, Edge 12.0+, Opera 10.0+, Safari 3.1+
• Android: Samsung Internet 1.0+, Chrome Android 18.0+, Firefox for Android 4.0+, Opera Android 10.1+
• iOS: Safari 2.0+

Теги: JavaScript

• Опубликовано: 3 Января, 2025
• Последнее редактирование: 3 Января, 2025