javascript - getting data-id attribute returns undefined - Stack Overflow

admin管理员组

文章数量:1391987

this might be similar question to others but i just cant fixed this so i have data-mentid attribute and it has a value from my database.

<div class="ment" data-mentid="24">
  <a href="#" class="pull-left">
    <!-- //Notice ment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="ment-avatar">
  </a>
  <!-- //Notice ment-body class-->
  <div class="ment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

<div class="ment" data-mentid="25">
  <a href="#" class="pull-left">
    <!-- //Notice ment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="ment-avatar">
  </a>
  <!-- //Notice ment-body class-->
  <div class="ment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>
<div class="ment" data-mentid="26">
  <a href="#" class="pull-left">
    <!-- //Notice ment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="ment-avatar">
  </a>
  <!-- //Notice ment-body class-->
  <div class="ment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

now using jquery i want to get the value from data-mentid

id = $(this).find('ment').attr('data-mentid');

data-mentid is rendered after a success of my ajax request... i already tried diff approach just to get the value from data-mentid but it always returned undefined but when i try to console.log(id); it returns undefined.

    var $htmlObjectComment = $($.parseHTML($.ajax({
        type:'GET',
        url:'../htmlstrings/ment.html',
        cache:false,
        async:false
    }).responseText));

    $htmlObjectComment.attr('data-mentid', results);
    $htmlObjectComment.find('a img').attr({'src': $el_user.find('a img').attr('src'), 'width': 30, 'height': 30});
    $htmlObjectComment.find('divment-body').children('span.message').html('<strong>' + $('div.user span').html() + '</strong> ' + $form.find('input').val());
    $htmlObjectComment.find('divment-body').children('span.time').attr('data-livestamp', currentDateTime);

    $el.find('divment:last').before($htmlObjectComment);
    $form.find('input').val(null);

this is my ajax success request. and the ment.html is the html above..

this is what the console.log($(this)); return..

this might be similar question to others but i just cant fixed this so i have data-mentid attribute and it has a value from my database.

<div class="ment" data-mentid="24">
  <a href="#" class="pull-left">
    <!-- //Notice .ment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="ment-avatar">
  </a>
  <!-- //Notice .ment-body class-->
  <div class="ment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

<div class="ment" data-mentid="25">
  <a href="#" class="pull-left">
    <!-- //Notice .ment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="ment-avatar">
  </a>
  <!-- //Notice .ment-body class-->
  <div class="ment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>
<div class="ment" data-mentid="26">
  <a href="#" class="pull-left">
    <!-- //Notice .ment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="ment-avatar">
  </a>
  <!-- //Notice .ment-body class-->
  <div class="ment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

now using jquery i want to get the value from data-mentid

id = $(this).find('.ment').attr('data-mentid');

data-mentid is rendered after a success of my ajax request... i already tried diff approach just to get the value from data-mentid but it always returned undefined but when i try to console.log(id); it returns undefined.

    var $htmlObjectComment = $($.parseHTML($.ajax({
        type:'GET',
        url:'../htmlstrings/ment.html',
        cache:false,
        async:false
    }).responseText));

    $htmlObjectComment.attr('data-mentid', results);
    $htmlObjectComment.find('a img').attr({'src': $el_user.find('a img').attr('src'), 'width': 30, 'height': 30});
    $htmlObjectComment.find('div.ment-body').children('span.message').html('<strong>' + $('div.user span').html() + '</strong> ' + $form.find('input').val());
    $htmlObjectComment.find('div.ment-body').children('span.time').attr('data-livestamp', currentDateTime);

    $el.find('div.ment:last').before($htmlObjectComment);
    $form.find('input').val(null);

this is my ajax success request. and the ment.html is the html above..

this is what the console.log($(this)); return..

• javascript
• jquery
• ajax

Share Improve this question Follow edited Jul 12, 2017 at 10:32 Lion Smith asked Jul 12, 2017 at 9:59 Lion SmithLion Smith 66533 gold badges1919 silver badges5050 bronze badges 7

• Try logging your $(this) and see if it contains the right data. – Hassan Imam Commented Jul 12, 2017 at 10:21
• i get this return [window].. – Lion Smith Commented Jul 12, 2017 at 10:23
• Just before id = $(this).find('.ment').attr('data-mentid'); write console.log($(this)) and check if it contains your html page. – Hassan Imam Commented Jul 12, 2017 at 10:25
• i can see the data-mentid was written on the innerHTML something like that.. – Lion Smith Commented Jul 12, 2017 at 10:29
• Change console.log($(this)) to console.log($(this).find('.ment')) and check the result if it contains the correct node. – Hassan Imam Commented Jul 12, 2017 at 10:31

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

The problem seems to be with this line of code:

id = $(this).find('.ment').attr('data-mentid');

Actually, $(this).find('.ment') returns an array not just a single object. Please try changing your code to as given below:

        var ments = $(this).find('.ment');
        $.each(ments , function(index, item){
             var id = $(item).attr('data-mentid');
             console.log(id); 
             /*If it prints correct values, you can make necessary changes in this piece of code as per your needs*/
        });

you can use .data() like this:

$(this).data('id') and this will look for data-id on whatever $(this) refers to.

here's the api documentation link - http://api.jquery./data/

so for you, you can do: $(this).find('.ment').data('mentid') and if that doesn't work, console.log $(this) and then console.log $(this).find('.ment') - they might be outputting something different to what you want

update

also as mentioned in another answer, .ment could be an array, as it is a class name rather than an id. Using $.each with $(this).data('mentid') should work :)

$('.ment').each(function(){
  console.log($(this).attr('data-mentid'));
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ment" data-mentid="24">
  <a href="#" class="pull-left">
    <!-- //Notice .ment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="ment-avatar">
  </a>
  <!-- //Notice .ment-body class-->
  <div class="ment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

<div class="ment" data-mentid="25">
  <a href="#" class="pull-left">
    <!-- //Notice .ment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="ment-avatar">
  </a>
  <!-- //Notice .ment-body class-->
  <div class="ment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>
<div class="ment" data-mentid="26">
  <a href="#" class="pull-left">
    <!-- //Notice .ment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="ment-avatar">
  </a>
  <!-- //Notice .ment-body class-->
  <div class="ment-body">
    <!-- //Notice .message class-->
    <span class="message"><strong>Tobei Tsumura</strong> Really Nice</span>
    <!-- //Notice .time class-->
    <span class="time" data-livestamp=""></span>
    <!-- //Notice .like class-->
    <a href="#" style="text-decoration: none;" id="user_likes" class="like">Like&nbsp;</a>

    <span class="like" id="name"></span>
  </div>
</div>

You should try using 'prop' instead of 'attr'.

You can try this:

$(this).find('.ment').prop('data-mentid');

本文标签： javascriptgetting dataid attribute returns undefinedStack Overflow