選擇具有相同類名的jQuery divs

我有一個HTML頁面，它利用一個循環來顯示來自4個不同用戶的隨機消息。在頁面上顯示10個「tweet」divs，除了他們的類名和內容外基本相同。

下面是一個例子：

<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>

這些div中的每一個都具有一個ID和一個類名：ID是相同的所有和是靜態的，類名是動態隨機分配1 4名：約翰，瑪麗，大衛，蘇珊。

一旦頁面加載我希望能夠點擊這些divs中的用戶名之一，並讓它只顯示來自該特定個人的消息。

下面是我使用的jQuery代碼：

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

showTweets是concats與隨機消息的隨機用戶，並將其添加到父DIV的功能。

由於代碼是，它只適用於頁面上的第一個div，而不是所有的div。我希望它適用於頁面上的所有用戶名div。

來源

2016-02-11 Theo Ryan

不能有相同的值的兩個'id'。 'id =「unique」'不是唯一的。 –

爲什麼您的「唯一」ID固定且始終相同，但是您的*動態分配名稱*一個類？ – Draco18s

我正試圖讓一個類名被分配給變量tweetUser。當我改變一個類的獨特性時，我無法隔離動態類名。 –

ID都是唯一的，爲此他們應該只出現一次。您可以通過使用數據屬性來繞過此操作。

例如

那麼你的JavaScript必須

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

來源

2016-02-11 19:56:45

你不應該有兩個或更多不同元素的相同ID。這就是課程的目的。所有使用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'); 
});

來源

2016-02-11 19:43:38 user1695032

生成以下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

來源

2016-02-11 19:52:08

選擇具有相同類名的jQuery divs

回答

相關問題