Javascript 如何在不影响其他列表组项的情况下操作一组列表组项？

我有一个AJAX请求，它将信息放在所提供代码底部的列表组中。 但是，此方法会更改DOM中的所有列表组项。 如何强制AJAX请求填充第二个列表组而不影响第一个列表组。 我已经尝试使用ID来代替jQuery选择器的类名，但它仍然不起作用

$(document).ready(function(){
    //calls repos for list group items
    $.ajax({
        type: "GET",
        url: "https://api.github.com/users/WolfgangHall/repos?sort=updated",
        success: function(repos) {
            for (var i = 0; i < repos.length; i++) {
                var newListItem = buildListGroup (repos[i]);
                $(".list-group").append(newListItem);
            }
        },
        error: function (jqXHR, textStatus) {
            alert("Something is wrong here");
        }
    });
    function buildListGroup (repoData) {
        var commitsApiUrl = "https://api.github.com/repos/";
        commitsApiUrl += repoData.owner.login + "/";
        commitsApiUrl += repoData.name + "/commits";

        var newLink = $("<a>")
        .attr("href", commitsApiUrl)
        .addClass("list-group-item")
        .append(repoData.full_name);

        return newLink
    }
});


<div class="row-fluid">
<div class="col-md-10 col-md-offset-1">
<div class="col-md-6">
    <div class="panel panel-primary">
        <div class="panel-heading">Front end</div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-success">
            <div class="panel-heading">Back end</div>
                <div class="panel-body">
                    <ul class="list-group">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Morbi leo risus</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div> 
<div role="tabpanel" class="tab-pane" id="githubTab">
<div class="row-fluid">
    <div class="col-md-4">
        <div class="list-group"></div>
    </div>
    <div class="col-md-8">
        <table class="table">
            <thead>
                <th>sha</th>
                <th>Author</th>
                <th>Message</th>
                <th>Date</th>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

$（文档）.ready（函数（）{
//调用列表组项目的repos
$.ajax({
键入：“获取”，
url:“https://api.github.com/users/WolfgangHall/repos?sort=updated",
成功：功能（回购）{
对于（变量i=0；i
Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭

后端

Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭

沙
作者
消息
日期

您可以使用jQuery“eq”方法将第二个项目作为“列表组”类的目标，如下所示：

替换：

$(".list-group").append(newListItem);

与

它正在工作：

（1索引）或（0索引）选择器应该可以工作

$(".list-group:nth-child(2)").append(newListItem);

或

.eq（）

是0索引的，因此它应该是

.eq（1）

它将始终是第二个列表组，还是始终是最后一个列表组，您希望将新数据/元素附加到该列表组？

$(".list-group:nth-child(2)").append(newListItem);

$(".list-group:eq(1)").append(newListItem);