获取data-id属性返回未定义

Question

这可能与其他人类似，但是我无法解决此问题，因此我具有data-commentid属性，并且它具有数据库中的值。

<div class="comment" data-commentid="24">
  <a href="#" class="pull-left">
    <!-- //Notice .comment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar">
  </a>
  <!-- //Notice .comment-body class-->
  <div class="comment-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="comment" data-commentid="25">
  <a href="#" class="pull-left">
    <!-- //Notice .comment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar">
  </a>
  <!-- //Notice .comment-body class-->
  <div class="comment-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="comment" data-commentid="26">
  <a href="#" class="pull-left">
    <!-- //Notice .comment-avatar class-->
    <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar">
  </a>
  <!-- //Notice .comment-body class-->
  <div class="comment-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>

现在使用jQuery，我想从data-commentid获取值

comid = $(this).find('.comment').attr('data-commentid');

我的ajax请求成功后，将呈现data-commentid ...我已经尝试了diff方法只是为了从data-commentid中获取值，但是它总是返回undefined，但是当我尝试console.log(comid); 它返回未定义。

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

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

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

这是我的ajax成功请求。 而comment.html是上面的html。

这就是console.log($(this)); 返回..

Answer 1

问题似乎出在这行代码上：

comid = $(this).find('.comment').attr('data-commentid');

实际上， $(this).find('.comment')返回一个数组，而不仅仅是一个对象。 请尝试将您的代码更改为如下所示：

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

Answer 2

您可以这样使用.data() ：

$(this).data('id') ，它将在$(this)所指的内容上查找data-id 。

这是api文档链接-http://api.jquery.com/data/

因此，对于您来说，您可以这样做： $(this).find('.comment').data('commentid') ，如果该方法不起作用，请console.log $(this) ，然后console.log $(this).find('.comment') -他们可能会输出与您想要的东西不同的东西

更新

同样在另一个答案中提到， .comment可以是一个数组，因为它是一个类名而不是ID。 将$.each与$(this).data('commentid')应该有效:)

Answer 3

您应该尝试使用“ prop”而不是“ attr”。

您可以尝试以下方法：

$(this).find('.comment').prop('data-commentid');

Answer 4

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="comment" data-commentid="24"> <a href="#" class="pull-left"> <!-- //Notice .comment-avatar class--> <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar"> </a> <!-- //Notice .comment-body class--> <div class="comment-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="comment" data-commentid="25"> <a href="#" class="pull-left"> <!-- //Notice .comment-avatar class--> <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar"> </a> <!-- //Notice .comment-body class--> <div class="comment-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="comment" data-commentid="26"> <a href="#" class="pull-left"> <!-- //Notice .comment-avatar class--> <img src="../assets/img/avatars/d-30x30.png" alt="D" class="comment-avatar"> </a> <!-- //Notice .comment-body class--> <div class="comment-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>