javascript - Selecting divs with jQuery with the same class name - Stack Overflow

admin管理员组

文章数量:1310385

I'm trying to mimic something like a social media profile page.

I've got an HTML page which utilizes a loop to displays random messages from 4 different users. 10 "tweet" divs are displayed on the page and are basically the same except their class names and their contents.

Here's an example:

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

Each of these divs has an ID and a class names: the ID is same for all and is static, the class name is dynamical and randomly assigned 1 of 4 names: john, mary, david, susan.

Once the page loads I want to be able to click one of the usernames in these divs and have it display only the messages from that particular individual.

Here's the jQuery code I'm using:

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

showTweets is a function that concats a random user with a random message and appends it to the parent div.

As the code is, it only works for the first div on the page, instead of for all of divs. I want it to work for all the username divs on the page.

I'm trying to mimic something like a social media profile page.

I've got an HTML page which utilizes a loop to displays random messages from 4 different users. 10 "tweet" divs are displayed on the page and are basically the same except their class names and their contents.

Here's an example:

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

Each of these divs has an ID and a class names: the ID is same for all and is static, the class name is dynamical and randomly assigned 1 of 4 names: john, mary, david, susan.

Once the page loads I want to be able to click one of the usernames in these divs and have it display only the messages from that particular individual.

Here's the jQuery code I'm using:

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

showTweets is a function that concats a random user with a random message and appends it to the parent div.

As the code is, it only works for the first div on the page, instead of for all of divs. I want it to work for all the username divs on the page.

• javascript
• jquery
• html

Share Improve this question Follow edited Feb 12, 2016 at 0:46 Theo Ryan asked Feb 11, 2016 at 19:40 Theo RyanTheo Ryan 5311 silver badge55 bronze badges 3

• 5 You cannot have two id with same values. id="unique" is not unique. – Praveen Kumar Purushothaman Commented Feb 11, 2016 at 19:41
• Why is your "unique" ID fixed and always the same, but your dynamically assigned name a class? – Draco18s no longer trusts SE Commented Feb 11, 2016 at 19:44
• I was trying to get just one class name to be assigned to the variable tweetUser. When I change unique to a class, I cannot isolate the dynamic class name. – Theo Ryan Commented Feb 11, 2016 at 19:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

ID are unique, therefor they should only appear once. You could bypass this, by using data-attributes.

For example

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

Then your javascript has to be

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

Generate the following html instead:

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

Now you can use the class "tweet" to find all the containers:

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

As mentioned in the ments, when you are in the event handler, you can use $(this) to reference the element that has been clicked.

A plete implementation: full example

You should never have the same id for two or more different elements. That's what classes are for. Everything which uses idS, assume you follow this rule.

you can use data attributes

<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');
}); 

本文标签： javascriptSelecting divs with jQuery with the same class nameStack Overflow