Выбор div с jQuery с тем же именем класса

Question

Я пытаюсь воспроизвести что-то вроде страницы профиля социальных сетей.

У меня есть HTML-страница, которая использует цикл для отображения случайных сообщений от 4 разных пользователей. На странице отображаются 10 "чириканье", и они в основном одинаковы, кроме имен классов и их содержимого.

Вот пример:

<div class="tweet"> 
    <div id="unique" class="mary"> 
    <strong>@mary:</strong> 
    </div>"the sun is shining today." 
</div> 
<div class="tweet"> 
    <div id="unique" class="john"> 
    <strong>@john:</strong> 
    </div>"I just ate an amazing pizza." 
</div> 

Каждый из этих дивы имеет идентификатор и имя класса: идентификатор является одинаковым для всех и является статическим, имя класса является динамическим и рандомизированы 1 из 4 имен: john, mary, david, susan.

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

Вот код JQuery Я использую:

var grabTweets = function(){ 
    showTweets('', 'all'); 
    $('#unique').on('click', function() { 
    var tweetUser = $('#unique').attr('class'); 
    showTweets(tweetUser, 'user'); 
    });  
} 

showTweets это функция, которая concats случайного пользователя с произвольным сообщением и присоединяет его к родительским делам.

Как код, он работает только для первого div на странице, а не для всех разделов. Я хочу, чтобы он работал для всех разделов имени пользователя на странице.

Answer 1

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

Например

Тогда ваш Javascript должен быть

$('[data-sharedName]').on('click', function() { 
    var tweetUser = $(this).attr('class'); 
    showTweets(tweetUser, 'user'); 
}); 

Answer 2

У вас никогда не должно быть одинакового идентификатора для двух или более разных элементов. Для этого нужны классы. Все, что использует idS, предполагает, что вы следуете этому правилу.

вы можете использовать данные атрибуты

<div class="tweet"> 
    <div data-uid="mike" class="tweet"> 
    <strong>@mary:</strong> 
    </div>"the sun is shining today." 
</div> 

$('.tweet').on('click', function() { 
    var tweetUser = $(this).data('uid'); 
    showTweets(tweetUser, 'user'); 
}); 

Answer 3

Сформировать следующий HTML вместо:

<div class="tweet"> 
    <div id="unique-1" class="mike"> 
    <strong>@mary:</strong> 
    </div>"the sun is shining today." 
</div> 
<div class="tweet"> 
    <div id="unique-2" class="mike"> 
    <strong>@john:</strong> 
    </div>"I just ate an amazing pizza." 
</div> 

Теперь вы можете использовать класс "чирикать", чтобы найти все контейнеры:

$('.tweet').on('click', function() { 
    /* here some code to find the child of the container */ 
    /* Use $(this) to reference the current container */ 
    }); 

Как упоминалось в комментариях, когда вы находитесь в обработчике событий, вы можете использовать $ (this) для ссылки на элемент который был нажат.

Полная реализация: full example