net和jquery将其应用于动态链接集

因此，我有一组动态生成的链接：

<a class="link"href="linkto/1" id="1">link 1</a>
<a class="link"href="linkto/2" id="2">link 2</a>
<a class="link"href="linkto/3" id="3">link 3</a>

然后这些链接调用一个操作，该操作返回一个数据列表并填充一个div（该div也在链接的正下方动态生成）

这是我的jquery

var url;
        var id;
        $('a.link').click(function () {
            url= $(this).attr('href');
            id = $(this).attr('id');
            $.ajax({
                url: url,
                dataType: 'JSON',
                success: function (data) {
                    var list = '';
                    var listcontainer = $('div.container').attr({ id: id.toString() });
                    $.each(data, function (i, client) {
                        list += '<div class="' + client.Id + '">Name of client = ' + client.Name + '</div>';
                    });
                    $(listcontainer).addClass("box-list-small");
                    $(listcontainer).html(list);
                },
                error: function (data) {
                    console.log('Cant load client list.');
                }
            });
            return false;
        });

var-url；
变量id；
$（'a.link'）。单击（函数（）{
url=$（this.attr（'href'）；
id=$（this.attr（'id'）；
$.ajax({
url:url，
数据类型：“JSON”，
成功：功能（数据）{
var列表=“”；
var listcontainer=$（'div.container'）.attr（{id:id.toString（）}）；
$。每个（数据、功能（i、客户端）{
列表+='客户机名称='+客户机名称+''；
});
$（listcontainer）.addClass（“小框列表”）；
$（listcontainer）.html（列表）；
},
错误：函数（数据）{
log（'无法加载客户端列表'）；
}
});
返回false；
});

因此，我试图实现的是，会有一个链接，当它被点击时，它下面的一个框会打开以显示列表。问题是，每次我点击其中一个的链接，它都会在页面中填充“容器”。这有意义吗

感谢时间

谢谢

编辑：修改的伪代码

<div class="row">
    <a class="link" href="linkto/1" id="1">link 1</a>
    <a class="someotherlink">someotherlink</a>
  </div>
 <div class="row">
    <div class="container" id="1"></div>
</div>
<div class="row">
    <a class="link" href="linkto/2" id="2">link 2</a>
    <a class="someotherlink">someotherlink</a>
</div>
<div class="row">
    <div class="container" id="2"></div>
</div>
<div class="row">
    <a class="link" href="linkto/3" id="3">link 3</a>
    <a class="someotherlink">someotherlink</a>
</div>
<div class="row">
    <div class="container" id="3"></div>
</div>

其他链接

行：

var listcontainer=$（'div.container'）.attr（{id:id.toString（）}）
查询类为“container”的每个div的DOM，然后将它们的所有id设置为单击的链接的id。。并将div集合返回到listcontainer变量中。然后调用
.html（list）
，这样它就可以设置所有容器

你可能想要更像这样的东西：

$('a.link').click(function () {
        var el = $(this),
            url= el.attr('href'),
            id = el.attr('id');
        $.ajax({
            url: url,
            dataType: 'JSON',
            success: function (data) {
                var list = '';
                $.each(data, function (i, client) {
                    list += '<div class="' + client.Id + '">Name of client = ' + client.Name + '</div>';
                });
                el.next('.container').addClass("box-list-small").html(list);
            },
            error: function (data) {
                console.log('Cant load client list.');
            }
        });
        return false;
    });

$（'a.link'）。单击（函数（）{
var el=$（此），
url=el.attr（'href'），
id=el.attr（'id'）；
$.ajax({
url:url，
数据类型：“JSON”，
成功：功能（数据）{
var列表=“”；
$。每个（数据、功能（i、客户端）{
列表+='客户机名称='+客户机名称+''；
});
el.next（'.container'）.addClass（“小框列表”）.html（列表）；
},
错误：函数（数据）{
log（'无法加载客户端列表'）；
}
});
返回false；
});
它似乎找不到“el.next”。它获得正确的attr值tho。它只是没有显示。
el.next（'.container'）
基于您粘贴的HTML（第二个代码片段）。如果您的DOM结构不同，那么您需要其他东西。。（
el.next（'.container'）
查找紧跟在单击的元素之后的元素），因此我的div是一种复杂的链接。我更新了原来的帖子，包括了所有的div。在尝试不同的东西，比如el.nextAll和el.Nestest。但在控制台上，它将根据更新的html像这样记录[object object]，您需要
el.nest（'.row'）.next（'.row'）.find（'.container'）
$('a.link').click(function () {
        var el = $(this),
            url= el.attr('href'),
            id = el.attr('id');
        $.ajax({
            url: url,
            dataType: 'JSON',
            success: function (data) {
                var list = '';
                $.each(data, function (i, client) {
                    list += '<div class="' + client.Id + '">Name of client = ' + client.Name + '</div>';
                });
                el.next('.container').addClass("box-list-small").html(list);
            },
            error: function (data) {
                console.log('Cant load client list.');
            }
        });
        return false;
    });