apply each function for multiple elements

Question

I have two elements with the same ID on one page. When I attempt to append the data in each element into the corresponding div, it appends the data from the first element into both divs.

Here's my markup:

<div id="data" class="democlass" data-author="Mr. Jhon Doe" data-cat="Technology" data-url="http://www.youtube.com/"></div>
<div class="post">    
    <p class="data-author"></p>
    <p class="data-cat"></p>
    <a href="#" class="data-url"></a>
</div>    

<div id="data" class="democlass" data-author="Mrs. Mona" data-cat="Personal" data-url="http://www.google.com/"></div>
    <div class="post">
        <p class="data-author"></p>
        <p class="data-cat"></p>
        <a href="#" class="data-url"></a>
    </div>

Here's the jQuery I am using:

$(document).ready(function() {
    var $ele = $("#data");
    $( ".data-author" ).append($ele.attr("data-author"));
    $( ".data-cat" ).append($ele.attr("data-cat"));
    $( ".data-url" ).append($ele.attr("data-url"));
$(".data-url").attr('href' , 'http://example.com/test/' + $ele.data('url'))
});

How can append the first element's data to the first .post, and the second element's data to the second .post?

A working codepen for test

You should not ever have two elements on the page with the same `id`. Change your markup to have unique IDs: http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme - your jquery may not work as expected when you have multiple items with the same ID. — random_user_name, Jan 24 '17 at 16:26
Possible duplicate of [Can multiple different HTML elements have the same ID if they're different elements?](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme) — chazsolo, Jan 24 '17 at 16:27
use classes if you want multiple items with the same "identifier" — warch, Jan 24 '17 at 16:29
Like folks said above, you shouldn't use same id for multiple markups. However, if you are adamant to go against the standard, wrap each div with id="data" with another div and then reference in jquery as a child. — Rahi, Jan 24 '17 at 16:31
@bona classes are meant to group different items togheter. So you can have many items with the same class — Lelio Faieta, Jan 24 '17 at 16:33
@LelioFaieta but if use the same class as identifier, il will use the first `class` as the data to append and ignore the next `class`, right? — bona, Jan 24 '17 at 16:36
Everyone here is focusing on the multiple ID's - but that's not relevant to the *question*. The elements already have a class that can be leveraged. @bona see my answer below. — random_user_name, Jan 24 '17 at 16:39

score 1 · Accepted Answer · edited May 23 '17 at 12:01

Firstly, change your markup so that you have unique ID's. The ID attributes is intended to be unique. Use a class to group elements together that you would like to handle in a certain way.

Note that if you DO use the same ID across multiple elements, jQuery may not do what you expect - so especially avoid the same ID when using jQuery / javascript.

But - to answer your question, which is not about multiple IDs with the same value, but rather how to cause data to be populated from multiple elements into the relevant div:

Use .each and .next:

// no-conflict-mode safe document ready shorthand
jQuery(function() {
  // get the items by class instead of id
  var $items = $(".democlass");
  // loop over the items
  $items.each(function() {
    // load $post with the desired div with the class of .post
    var $post = $(this).next('.post');
    // put the data into the html
    $post.find(".data-author").text($(this).attr("data-author"));
    $post.find(".data-cat").text($(this).attr("data-cat"));
    $post.find(".data-url").text($(this).attr("data-url"));
    $post.find(".data-url").attr('href', 'http://example.com/test/' + $(this).data('url'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="data" class="democlass" data-author="Mr. Jhon Doe" data-cat="Technology" data-url="http://www.youtube.com/"></div>
<div class="post">
  <p class="data-author"></p>
  <p class="data-cat"></p>
  <a href="#" class="data-url"></a>
</div>
<div id="data" class="democlass" data-author="Mrs. Mona" data-cat="Personal" data-url="http://www.google.com/"></div>

<div class="post">
  <p class="data-author"></p>
  <p class="data-cat"></p>
  <a href="#" class="data-url"></a>
</div>

apply each function for multiple elements

1 Answers1