jQuery - отображение количества вхождений divs

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть следующий html…

 <div class="display">sometext</div>
<div class="display">sometext</div>
<div class="display">sometext</div>

Используя jQuery, я хочу иметь возможность щелкнуть первый div , и появится предупреждение о том, что вы нажали на первый div и так далее. Я знаю, как подсчитать количество div s с определенным классом, но не как определить, какой из них нажат.

Ответ №1:

За кулисами .index() также выполняется цикл по всем предыдущим элементам. Следующая альтернатива более эффективна, чем .index() когда у элемента много братьев и сестер.

 $(".display").each(function(i){
    $(this).click(function(){
        alert("Clicked div.display, number "   i);
    }
});

1. Хорошее использование замыкания. На самом деле внутренне jQuery использует inArray функцию, которая проверяет, есть ли в браузере indexOf, если есть, то он использует indexOf.call(...) для возврата индекса, если нет, то да, он выполняет цикл.

Ответ №2:

Я не уверен в «первом» как таковом, но вы могли бы попробовать:

 $('.display').click(
    function(){
        alert("You clicked div number: "   ($(this).index('.display')   1)   ", of "   $('.display').length);
    });

Скрипка JS.

Ссылки:

.index() .

1. Ahhh .index, я думаю, это то, что я искал.

2. @Interstellar_Coder: гм, в каком смысле это сложно?

3. Nvm, ты только что сделал это сложным: -P Это тот же подход, что и у меня, используя .index , хотя вы должны кэшировать свой селектор, чтобы ему не приходилось находить все divs при каждом нажатии.

Ответ №3:

Вот простой способ.

 $divs = $('.display'); 
$divs.click(function(){
     alert( $divs.index($(this)) ); 
})

Поиграйте с этим.

Ответ №4:

Ответ прост и доказан этим jsfiddle:

 var containers = jQuery('.display');
containers.bind('click', function(event){
    alert('Clicked element no. '   (containers.index(this) 1));
});

Пожалуйста, дайте мне знать, помогло ли это.

Ответ №5:

Вы можете сделать просто:

HTML

 <div class="display" name="1">sometext</div>
<div class="display" name="2">sometext</div>
<div class="display" name="3">sometext</div>

JavaScript

 $('.display').click(function(){
    alert($(this).attr('name'));
});

Демонстрация: http://jsfiddle.net/SzwJU /

Ответ №6:

Зачем использовать jQuery? Вы можете написать простой javascript, который запускается при нажатии div.