How to take an attribute of multiple "tags" with same ID

Asked

Viewed 1,019 times

7

Hello, when clicking one of the 3 options in "HTML" that is in the code below, I want the function in "JS" emits an "Alert" with the "idPost" in which it was clicked. EX: When I click on the "PHP" link it emits an Alert 25, which would be its idPost. But when I click on the other options the function does not emit any Alert. If I did two other functions and changed the ids, I know it would work, but as it is a posting system, that would be my options, when adding a new post I would have to do another new function, so I used the same ids. I hope that’s clear!

HTML code:

<p id="linkPost" idPost="25"><a href="#">PHP</a></p>
<p id="linkPost" idPost="26"><a href="#">HTML</a></p>
<p id="linkPost" idPost="27"><a href="#">JAVASCRIPT</a></p>

JS Code:

$('#linkPost').on('click', function(){
     var id = $(this).attr('idPost');
     alert(id);
});
javascript

  • Do you click PHP? This doesn’t make much sense, you mean that in a php document js works, but in an HTML document it doesn’t?

  • Like, this is supposed to be a posting system, this is just a test, could be other titles. When I click on one of these titles of the same ID I wanted the function to take idPost, which I will later use in other things!

  • 1

    Still not making sense to click on PHP.

  • PHP would be the subject of a post, clicking it would open the post. PHP is just a test

  • 1

    No matter the content of your PHP, what makes no sense is what you asked, in other words we can not understand what you mean by "click on PHP", for you can even make sense, but remember just because you understand your own problem doesn’t mean you can pass it on to other people... Then edit the question and make a clearer text please. Grateful.

  • the answers of Rafel and Sérgio solve the problem, however, there is a bigger problem that is the semantics.

Show 1 more comment

2 answers

9


Dual ID is invalid HTML. Uses id classes.

You can change the HTML to 

<p class="linkPost" idPost="25"><a href="#">PHP</a></p>
<p class="linkPost" idPost="26"><a href="#">HTML</a></p>
<p class="linkPost" idPost="27"><a href="#">JAVASCRIPT</a></p>

and change only on selector of # for ., keeping the rest of your code as is. That is:

$('.linkPost').on('click', function(){

jsFiddle: http://jsfiddle.net/j4retqxb/

Or you can use it as a selector $('[idPost]'), that uses this attribute in the search instead of classes or ids. In this case it would be:

$('[idPost]').on('click', function(){

jsFiddle: http://jsfiddle.net/j4retqxb/1/

  • 1

    Thank you @Sergio

6

When you click, you click on the element a, so your selector can changed to $('#linkPost a'). With that we can catch the #linkPost using the function parent(), since a is son of #linkPost.

It is very important that you notice that HTML is invalid as it is not allowed to use elements with the same ID. Instead, you can use classes for elements with repeated properties. This way, the selector changes to $('.linkPost a'):

$('.linkPost a').on('click', function(){
     var id = $(this).parent().attr('idPost');
     alert(id);
});

Fiddle: http://jsfiddle.net/bm96ytvb/1/

  • Thanks, it worked!

  • 1

    Gee, I didn’t even notice the repeated Ids @Sergio. I’d like to edit my answer?

  • Okay, thanks for the guidance. I’ll be more attentive on the next x)

  • Yeah, I managed to confuse it with the CSS selectors and the C#elements. I edited it one more time.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.