Используйте ту же функцию для нескольких элементов jQuery

Question

Я новичок в jQuery, и я пытаюсь написать небольшой фрагмент кода, но у меня проблема.

Вот код:

$(document).ready(function(){ 
    $(".first-li").hover(function(){ 
    $(".p-gallery").slideToggle(); 
    }); 
}); 

Этот код работы. Я хочу использовать этот код на каждый элемент из списка:

<ul class="cbp-rfgrid"> 
       <li class="first-li"><a href="images/col1.jpg"><img src="images/col1.jpg" /><p class="p-gallery">Title</p></a></li> 
       <li class="first-li"><a href="images/col2.jpg"><img src="images/col2.jpg" /><p class="p-gallery">Title</p></a></li> 
       <li><a href="images/col3.jpg"><img src="images/col3.jpg" /></a></li> 
       <li><a href="images/col4.jpg"><img src="images/col4.jpg" /></a></li> 
       <li><a href="images/col3.jpg"><img src="images/col3.jpg" /></a></li> 
       <li><a href="images/col4.jpg"><img src="images/col4.jpg" /></a></li> 
       <li><a href="images/col1.jpg"><img src="images/col1.jpg" /></a></li> 
</ul> 

Я не хочу, чтобы использовать эти классы первого-Li для <li> и п-галереи для <p>, просто чтобы сделать возможную каждый элемент из списка получить эту функцию jQuery. я пытался что-то вроде этого:

$(document).ready(function(){ 
$("cbp-rfgrid > li").bind("hover", function() { 
    $("p").slideToggle(); 
}); 
}); 

, но он не работает. :( Пожалуйста, помогите мне Спасибо

Answer 1

Предполагая, что каждый элемент в списке выглядит примерно так:

<li class="first-li"><a href="images/col1.jpg"><img src="images/col1.jpg" /><p class="p-gallery">Title</p></a></li> 

должно работать:

$(document).ready(function(){ 
    $(".cbp-rfgrid > li").hover(function() { 
     $(this).find("p").slideToggle(); 
    }); 
}); 

EDIT: не пытается взять кредит за то, что я не говорил первый, но Действительно, @FranVerona сделал важный момент в своем ответе: убедитесь, что вы добавили точку (.) перед вашим селектором, если вы имеете в виду класс, т.е. cbp-rfgrid > li должен быть .cbp-rfgrid > li, но это была только одна из ошибок.

Answer 2

Я думаю, что ваша проблема может быть решена только добавить точку на вашем JQuery предложении:!.

$(document).ready(function(){ 
    $(".cbp-rfgrid > li").bind("hover", function() { 
    $("p").slideToggle(); 
    }); 
}); 

класса 'CBP-rfgrid' = $ (»ТПС -rfgrid ")

имя Tag = $ (" ТПС-rfgrid ")

Вы принимаете элементы с этим тегами, и они не существуют. Я надеюсь, что это помогает. Счастливое кодированию!