Javascript handle 2 data attribute

Question

I need to use data attribute in my html like <div id="userlist" data-user="A.A.M"></div> then I need to alert the data-user I used

var userlist = document.getElementById("userlist");

var show = userlist.getAttribute("data-user");
alert(show);

My question is how to handle many data-user in the html like

<div id="userlist" data-user="A.A.M"></div> <div id="userlist2" data-user="A.A.M2"></div> to alert A.A.M and A.A.M2

Thanks in advance and sorry for my bad English.

You want something that will give you all the elements with that attribute. See http://stackoverflow.com/questions/9496427/can-i-get-elements-by-attribute-selector-when-queryselectorall-is-not-available. Then you will need to loop through them all. — lampwins, Jun 01 '14 at 02:41
Please can you show me an example as I tried and it didn't work — user3530661, Jun 01 '14 at 03:10

score 2 · Answer 1 · answered Jun 01 '14 at 02:43

2

You could select your elements by attribute.

$("div[data-user]").each(function() {
    var user = $(this).data("user");
    alert(user);
});

If you have multiple attributes per element (<div data-user='something' data-another='another'></div>), you can also access those in the same way:

$("div[data-user]").each(function() {
    var user = $(this).data("user");
    var another = $(this).data("another");
    alert(user + ", another: " + another);
});

answered Jun 01 '14 at 02:43

Mun

14,098
11
59
83

1

Instead of `$(this).data("user")` try `this.getAttribute("data-user")` or with jQuery `$(this).attr("data-user")`. – Yoann Jun 01 '14 at 05:32
@user3530661 Here's a JSFiddle demonstrating this: http://jsfiddle.net/munr/Tk7xL/ – Mun Jun 01 '14 at 20:12

Hank X · Accepted Answer · 2014-06-01T03:53:06.833

1

you know how to alert 1, alert 2:

alert at the same time:

var data1 = document.getElementById("userlist").getAttribute("data-user");
var data2 =  document.getElementById("userlist2").getAttribute("data-user");

var data = data1 +"\n" +  data2; //"\n" can be other separators you like

alert(data)

if you have many of them, you can use jQuery: add this in your , before any other js code.

 <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

then :

  $("div[id^=userlist]").each(function(){
      alert($(this).attr("data-user"));
    });

edited Jun 01 '14 at 03:53

answered Jun 01 '14 at 02:41

Hank X

1,988
2
14
32

This is a basic way. I need to be dona automaticly – user3530661 Jun 01 '14 at 02:51
The jquery way is automatic method. try it. @user3530661 – Hank X Jun 01 '14 at 02:58
It didn't work and the error in console is "Uncaught SyntaxError: Unexpected token ) " – user3530661 Jun 01 '14 at 03:04
Uncaught ReferenceError: $ is not defined – user3530661 Jun 01 '14 at 03:18
No I am still beginner :( – user3530661 Jun 01 '14 at 03:52

score 0 · Answer 3 · answered Jun 01 '14 at 02:41

0

Calling getElementById on both should work. If you want to iterate you can try to use getElementsByTagName or getElementsByClassName. If you want to select any arbitrary element with the attribute data-user, you can either use querySelectorAll, or check out jQuery, and use $("[data-user]") as a selector.

Does that answer your question?

answered Jun 01 '14 at 02:41

EyasSH

3,679
22
36

I need the javascript to automatically allert 2 time 1 with A.A.M and the other with A.A.M2, Can you show me an example please – user3530661 Jun 01 '14 at 02:55

Javascript handle 2 data attribute

3 Answers3