разные идентификаторы, но та же проблема имени класса - PullRequest
Новая
       10

разные идентификаторы, но та же проблема имени класса

0 голосов
/ 22 августа 2011

Я отобразил ряд элементов с тем же именем класса div, но разными идентификаторами div

Я пытаюсь использовать jquery для захвата разных идентификаторов при наведении курсора на элементы. Но прямо сейчас, каждый элемент, над которым я нахожусь, я получаю только последний идентификатор, а не тот конкретный идентификатор, который у меня при наведении.

Это мой php: 

while($row = mysql_fetch_array($sql)){
$id = $row['id'];
echo "<div class='row'><div class='a' id='a_".$id."'>do something</div></div>";
}

Предположим, что это будет иметь 10 строк, и каждая строка div будет иметь уникальные идентификаторы

Тогда это мой jquery: 

 $('.row').hover(function(){
    var a = $('.a').attr('id');
    alert(a);
    }, function(){

});

Может ли кто-нибудь помочь мне понять, почему я получаю только последний идентификатор (все одинаковые), а не разные идентификаторы?

Спасибо!

Ответы [ 5 ]

3 голосов
/ 22 августа 2011

Изменить 

var a = $('.a').attr('id');

на 

var a = $('.a', this).attr('id');

Причина, по которой вы получаете только последний идентификатор с первым, заключается в том, что ваш запрос не указывает никакого контекста, то есть вы 'перебирает весь документ на предмет a классов.При использовании метода attr() для многоэлементного объекта jQuery он будет возвращать атрибут только из последнего.

Демонстрация здесь - http://jsfiddle.net/h7QDX/

1 голос
/ 22 августа 2011

Предполагая, что визуализированная разметка вашего php-скрипта похожа на следующую: 

<div id="currentTarget"></div> <!-- just for the purposes of the demo -->
<div class='row'><div class='a' id='a_1'>do something</div></div>
<div class='row'><div class='a' id='a_2'>do something</div></div>
<div class='row'><div class='a' id='a_3'>do something</div></div>
<div class='row'><div class='a' id='a_4'>do something</div></div>
<div class='row'><div class='a' id='a_5'>do something</div></div>
<div class='row'><div class='a' id='a_6'>do something</div></div>

Следующий jQuery работает для извлечения id элемента .a с использованием hover():

$('.a').hover(
    function(){
        $('#currentTarget').text(this.id);
        // retrieve the id with: this.id
    },
    function(){
        $('#currentTarget').text('');
    });

JS Fiddle demo .

Очевидно, что вышеизложенное основано на зависании самого элемента .a;если вы хотите вызвать то же самое, наведя курсор на элементы .row, то: 

$('.row').hover(
    function(){
        $('#currentTarget').text($(this).find('.a').attr('id'));
        // retrieve the id with: $(this).find('.a').attr('id')
    },
    function(){
        $('#currentTarget').text('');
    });

JS Fiddle demo .

1 голос
/ 22 августа 2011 
var a = $('.a', this).attr('id');

Вам необходимо предоставить контекст (this), если вы хотите найти конкретные элементы в текущем контексте.

0 голосов
/ 22 августа 2011

Попробуйте, 

$('.row').hover(function(){
    var a = $('.a').attr('id');
    alert($('.a',this).attr('id'));
    }, function(){

});
0 голосов
/ 22 августа 2011

Здесь: var a = $('.a').attr('id'); вы получите первый элемент с классом 'a', который вы хотите $ (this)

, например: 

$('.row').hover(function(){
    var a = $(this).attr('id');
    alert(a);
    }, function(){

});

, если вы хотите, чтобы div-ведьма содержала'.row' использовать .parent (многократно как div)

вот так: 

$('.row').hover(function(){
    var a = $(this).parent().attr('id');
    alert(a);
    }, function(){

});
...