使用jQuery

Question

我在使用jQuery覆盖特定父类的元素时遇到了一些麻烦。例如，我有两个具有相同名称的类，但我只希望将第一个实例用于特定目的，然后将其他实例用于其他目的，但内部数据仍然被我正在使用的下一个函数覆盖。我想我知道为什么会这样做，我只是不确定如何修复它所以它没有。

这是我的jQuery代码：

function buildFriendStatus() {
    $.getJSON('/members/feed/get-friend-status', function(data) {
        var notFirstElement = $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:not(first)')

        $.each(data, function(i, item) {
            var element = notFirstElement.eq(i);

            element.find('h4').html(data[i].username);
            element.find('p').html(data[i].status);
            element.find('img').attr('src', data[i].images);
        });
    }).fail(function(response) {
        console.log(response.fail);
    }); 
}


function buildSelfStatus() {
    $.getJSON('/members/feed/list-own-status', function(data) {
        $.each(data, function(i, item) {
            $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('h4').html(data[i].username);
            $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('p').html(data[i].status);
            $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('img').attr('src', data[i].images);
        });
    }).fail(function(response) {
        console.log(response.fail);
    });
}

setInterval(function() {
    buildFriendStatus();
}, 1000);

然后是html /调用函数

<script type="text/javascript">
        buildSelfStatus();
        buildFriendStatus();
</script>

<!-- always have this first (sticky) for the user status -->
<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
    <h4></h4>

    <p></p>

    <div class="w3-row-padding" style="margin: 0 -16px;">
        <div class="w3-half">
            <img src="" style="width: 100%; height: 200px;" alt="<?php echo $this->identity() . "'s image"; ?>" class="w3-margin-bottom w3-round w3-border">
        </div>
    </div>
</div>


<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
    <h4></h4>

    <p></p>

    <div class="w3-row-padding" style="margin: 0 -16px">
        <div class="w3-half">
            <img src="" style="width: 100%; height: 200px;" alt="<?php echo "Image"; ?>" class="w3-margin-bottom w3-round w3-border">
        </div>
    </div>

    <button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom">
        <i class="fa fa-thumbs-up"></i> Like
    </button>
    <button type="button" class="w3-btn w3-theme-d2 w3-margin-bottom">
        <i class="fa fa-comment"></i> Comment
    </button>
</div>

以下是该问题的屏幕截图。

更新截图（显示第一张图片，但不显示其他结果）

任何帮助将不胜感激

谢谢！

哦，另外请注意，是否有一种方法可以使用jQuery将数据放入类中，但是如果不覆盖之前添加的数据但是只有一个<div>元素，则可以多次显示该类名称？有点像附加的截图，但不是同时覆盖每个类。只是好奇，因为我找不到任何关于这个。我想我的意思是根据通过$.getJSON检索的结果动态构建div元素及其子元素。

Answer 1

$(".getfirst").click(function(){
	alert($(".testdiv").first().text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testdiv">
33
</div>
<div class="testdiv">
44
</div>
<div class="testdiv">
55
</div>
<div class="testdiv">
66
</div>
<div class="getfirst" style="width:150px; height:50px; background-color:red;">
  get me!!
</div>

为什么不使用jQuery的.first（）？

例如，假设你有4个具有相同类的div，但是你想获得具有特定类名的第一个div元素的文本：

<div class="testdiv">33</div>
<div class="testdiv">44</div>
<div class="testdiv">55</div>
<div class="testdiv">66</div>

<div class="getfirst" style="width:150px; height:50px; background-color:red;">
  get me!!
</div>


$(".getfirst").click(function(){
    alert($(".testdiv").first().text());
});

Answer 2

刚刚在第一个元素中添加了另一个类。