javascript - Error javascript only get first value data-href?

Question

I have a sample code:

<div id="fb-root"></div>
<div class="fb-comments" id="fb-comment" data-href="http://fb.com/t1" data-num-posts="3" data-width="590" ></div> 

<div class="fb-comments" id="fb-comment" data-href="http://fb.com/t2" data-num-posts="3" data-width="590" ></div> 

And javascript:

<script>
window.fbAsyncInit = function() {
    FB.init({
        appId : 'xxx', // App ID
        channelUrl : 'xxx', // Channel File
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml : true // parse XFBML
    });

    FB.Event.subscribe('comment.create', function(response) {
        var href = jQuery('.fb-comments').attr('data-href');
        alert(href);
    });
}
</script>

Error jquery only get first value is http://fb.com/t1, not get http://fb.com/t2

Answer 1

DEMO

make use .each() to traverse to every element with class fb-comments

var href='';
jQuery('.fb-comments').each(function () {
    href += $(this).attr('data-href') + ' ';
})

DEMO

or make use .map()

href is in the form of array using below code

var href= jQuery('.fb-comments').map(function(){
    return jQuery(this).attr('data-href');
});
console.log(href);

Answer 2

var thestring = '';

$('.fb-comments').each(function () {
    thestring += $(this).attr('data-href') + ' ';
});