jquery таргетинг вложенный #div

Question

Я веб-дизайнер, а не программист и новичок в Javascript / jQuery (хотя у меня есть опыт работы с PHP)

У меня проблемы с пониманием, почему я не могу выбрать правильный div для эффекта парения.

Скрипка здесь: http://jsfiddle.net/obmerk99/F6wJs/

Когда я нацеливаюсь на определенный класс div (.mas), эффект работает просто отлично Но когда я нацеливаюсь на второй класс div (.meta2 - абсолютный, расположенный в границах первого - .mas), эффект не работает.

(простые слова - я хочу, чтобы эффект вызывался большим пальцем, а не большим изображением.)

код такой же, так что это не синтаксическая ошибка - я уверен, что упускаю что-то фундаментальное в понимании jQUery.

Не хочешь объяснить ??

РЕДАКТИРОВАТЬ I:

Поняв, что объяснил @Rick - я должен сказать, что моя проблема была немного сложнее, я просто опубликовал простую версию, потому что я подумал, что этого достаточно.

Настоящая разметка имеет БОЛЕЕ один элемент из указанных классов.

Если я уберу «, это» из кода, он вызовет ВСЕ из них ..

Новая скрипка здесь: http://jsfiddle.net/obmerk99/F6wJs/1/

Answer 1

Проблема в том, что вы пытались выбрать «.meta» в качестве потомка «.meta2», а это не так.Строка:

jQuery(".meta", this).fadeIn(400);

Говорит, чтобы выбрать элементы ".meta" в контексте this - который в данном случае является элементом ".meta2", с которым была связана функция .mouseenter().Но ".meta" не является потомком ".meta2".Вы можете просто удалить контекст this следующим образом:

jQuery(".meta").fadeIn(400);

И он будет работать, как показано в этом обновленном скрипте: http://jsfiddle.net/VFwxN/6/

Однако, это исчезнет в все элементы с классом ".meta".Если вы хотите использовать это на странице, имеющей несколько элементов с этим классом, вы должны вместо этого использовать метод .prev(), чтобы выбрать div, который непосредственно предшествует тому, над которым ".meta2" div находился:

jQuery(this).prev(".meta").fadeIn(400);

Демо: http://jsfiddle.net/VFwxN/10/

Очевидно, что это относится конкретно к используемой вами html-структуре, где ".meta2" и ".meta" - это братья и сестры.

Предоставление селектора для .prev()означает, что он выберет предыдущий элемент, только если он соответствует этому селектору (иначе он не будет ничего соответствовать - он не будет смотреть дальше).

Answer 2

Проблема на самом деле исчезает. В JQuery у вас на скрипке есть такие вещи:

jQuery(".meta",this).fadeIn(400);

Это говорит JQuery искать .meta в this, а ключевое слово this здесь относится к объекту JQuery, возвращаемому внешним селектором.

Другими словами, если ваш внешний селектор - .mas, JQuery ищет только .meta в .mas. Если внешний селектор - .meta2, он ищет только .meta в .meta2. И, конечно, .meta находится внутри .mas, но не находится внутри .meta2, следовательно, проблема, с которой вы столкнулись.

Это можно исправить, просто удаляя второй параметр (this) из каждого вызова исчезновения. Таким образом, строка раньше становится:

jQuery(".meta").fadeIn(400);

Обновленная скрипка здесь: http://jsfiddle.net/qsQWU/1/

Edit:

Как указывалось в других ответах и ​​редактировании вопроса (спасибо за хедз-ап), я не думал о том, что это нужно делать по нескольким элементам по отдельности. Они верны; вышеуказанное решение не будет работать для этого сценария. Их альтернативы работают, но я также хочу предложить третью возможность: заменить this на jQuery(this).parent(), чтобы контекст стал на один уровень выше.

Новая скрипка, измененная после редактирования вопроса, находится здесь: http://jsfiddle.net/GU8Bj/

Answer 3

Он может захотеть использовать "this", потому что будет несколько meta2, которым нужна эта функция наведения.

Я обновил jsfiddle здесь ->

http://jsfiddle.net/VFwxN/7/

Я реструктурировал HTML, чтобы отразить то, что вы пытались сделать со своим JS.

Проблема в том, что

JQuery (это "мета"). .FadeIn (400);

Искал элемент с классом 'meta', который находился в пределах 'this', это элемент, который вызвал действие. в твоем случае это было ->

jQuery (". Mas"). Mouseenter (function () {

Исправление структуры DOM позволяет вам ссылаться на мета в рамках мета2. Если вы не можете реструктурировать DOM и вам не нужно использовать «this» для ссылки на элемент mouseover, вы можете использовать решение, предоставленное Риком.