2016-02-11 1 views
-1

У меня есть HTML-код:Как выбрать только те элементы, которые стоят близко друг к другу?

<html> 
    <head></head> 
    <body> 
    <div class="images"> 
     Some text 
     <img src="image1.jpg"> 
     Some text 
     <img src="image2.jpg"> 
     <img src="image3.jpg"> 
     <img src="image3.jpg"> 
     Some text 
     <img src="image4.jpg"> 
     Some text 
    </div> 
    </body> 
</html> 

Мне нужно выбрать только те изображения, который стоит вместе и добавить класс к ним. В приведенном выше примере мне нужно добавить класс ко второму и третьему изображениям. Как я могу реализовать его с JQuery или Vanila JS?

+0

Почему бы не использовать классы? – Microsmsm

+2

'img + img' выберет любое изображение, которому предшествует другое изображение. – pawel

+0

Каков родительский элемент вышеуказанного кода? являются ли они единственными изображениями на странице? Нам нужно знать один из перечисленных выше, чтобы дать вам рабочий код –

ответ

0

Прежде всего, вы должны положить Some text в тег. это может быть любой тег, который вы хотите. Я выбираю тег span.

<span>Some text</span> 
<img src="image1.jpg"> 
<span>Some text</span> 
<img src="image2.jpg"> 
<img src="image3.jpg"> 
<img src="image3.jpg"> 
<span>Some text</span> 
<img src="image4.jpg"> 
<span>Some text</span> 

после этого, вы должны использовать .prev() в JQuery, чтобы выбрать предыдущий тег в выбранном ГИМ. потому что, когда вы выбираете изображения с img+img, он выбирает только два изображения после первого. поэтому первое желаемое изображение не могло быть в вас. Я подготовил вам это объяснение в JSfiddle, чтобы быть более ясным.

$("img + img").addClass('red'); 
$("img + img").prev().addClass('red'); 

https://jsfiddle.net/linkers/dhpqaoLx/3/

, очевидно, вы можете оптимизировать свой код, используя переменные вместо того, чтобы использовать селектор JQuery дважды.

 Смежные вопросы

  • Нет связанных вопросов^_^