jQuery Select 2 Divs Up

Question

Я немного запутался в том, как правильно выбрать родительский элемент, то есть на 2 DIV больше.

Другими словами, мой HTML выглядит так:

 <div>Folder</div>
 <div class="file_info">
   <a href="test.jpg">Test File</a>
 </div>

Вот мой текущий JQuery: $("a[href$='.jpg']").addClass("Image");

Однако я не хочу добавлять класс в <a>, вместо этого я хочу добавить класс в «папку» 2 DIV выше.

Какой лучший способ сделать это?

Спасибо!

Answer 1

Учитывая надежность jQuery, почти всегда есть несколько способов сделать то, что вам нужно - вот несколько способов выбора элемента дедушки:

$("a").parent().parent();

Это именно так и звучит - он выбирает родителя родителя вашего якоря. parent - это элемент, непосредственно окружающий целевой элемент. В этом случае это элемент div оба раза.

$("a").parents("div:eq(1)");

В этом примере обратите внимание, что мы используем множественное число родителей . Это ищет всех родителей для элемента, а затем возвращает его как коллекцию. Затем мы указываем, каких родителей мы хотели бы вернуть в коллекцию, предоставляя определенный выбор: div:eq(1).

Это говорит о том, что нам нужны элементы div, а именно те элементы div, которые находятся в позиции 2 в нашей результирующей коллекции. По определению, позиция 2 может содержать только один элемент, поэтому мы возвращаем только один элемент - дедушкин элемент.

Если вас смущает то, что я называю эту «позицию 2», когда спрашиваю div, что равно (:eq) 1, просто помните, что JavaScript использует индексацию с нуля система, поэтому первый элемент в коллекции имеет индекс 0, а второй - индекс 1 и т. д.

$("a").parents("div").get(1);

Еще один пример, аналогичный последнему, в котором используется .get. Это также вызывает метод .parents, чтобы получить все элементы div. Это возвращает объект jQuery, полный div элементов (при условии, что ваше родительское дерево полно div элементов).

Метод .get получает индекс, соответствующий элементу, который мы хотели бы получить. В этом случае мы ищем второй элемент div, который снова будет храниться с индексом 1 в коллекции, полученной в результате вызова .parents.

Следует отметить одну важную вещь: этот пример, в отличие от предшествующих ему, возвращает фактический HTMLDivElement, а не объект jQuery. Разница в том, что вы не можете вызывать методы jQuery из HTMLDivElement, если не включите их снова в $().

Answer 2

Это будет работать:

$("a[href$='.jpg']").parent().prev().addClass("Image");

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

См. Документацию по parent и prev для получения более подробной информации.

Answer 3

$("a[href$='.jpg']").parent().parent().addClass('Image');