Question

我有一个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>

Answer 1

您可以使用jQuery'eq'方法将第二个项目定位为'list-group'类，如下所示：

取代：

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

与

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

这里有效：http://codepen.io/caleboleary/pen/qbBMgG

Answer 2

:nth-child()（1索引）或:eq()（0索引）选择器应该有效。

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

或

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

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

2 个答案: