获取data-id属性返回undefined

时间：2017-07-12 09:59:06

标签： javascript jquery ajax

这可能是与其他人类似的问题，但我不能解决这个问题，所以我有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');

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

    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));返回的内容.. enter image description here

4 个答案:

答案 0 :(得分：3)

问题似乎出现在这行代码中：

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*/
        });

答案 1 :(得分：2)

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

$(this).data('id')这将在data-id引用的任何内容中查找$(this)。

这是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')一起使用应该有效：）

答案 2 :(得分：1)

你应该尝试使用'prop'而不是'attr'。

你可以试试这个：

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

答案 3 :(得分：1)

＆＃13;
＆＃13; 
$('.comment').each(function(){
  console.log($(this).attr('data-commentid'));
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题