如何将ajax响应放在相关的li元素中

Question

我正在尝试在页面加载时发出 ajax 请求，这将通过使用 jquery each() 方法在这些 li 中选择 href 链接来检索每个 li 元素的数据，从而为每个 li 的 ajax 请求生成动态 url。

但是，我已经为 ajax 响应中的每个 li 检索数据，但问题是所有响应都添加到每个 li 元素而不是相关 li。

如何仅过滤相关 li 的数据？

下面是我发出 Ajax 请求的代码：-

$(document).ready(function() {
    $('ul.asd li a.sub-cat-name').each(function() {
        var urln = $(this).attr("href");
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: urln,
            success: function(data) {
                var res = $(data).find('.CategoryDescription').html();
                /*$('ul.asd li div.allprdct').each(function()
                {
                $(this).before('<div class="desc"> '+ res +' </div>');

                });*/
                $('ul.asd li div.allprdct').before('<div class="desc">' + res + '</div>');
            }
        });
    });
});

这是输出页面的网址：-

http://www.development-rerack.mybigcommerce.com/cargo-boxes-baskets/

商店预览代码为：l5wv7x0rj2

这是一个父类别页面，列出了 li 中的所有子类别。 现在，在此页面加载时，我正在向这些所有子类别页面发出 ajax 请求，以通过使用 jquery 循环将动态 url 传递给 ajax 来检索所有子类别的类别描述。

我可以获取 ajax 响应中所有子类别的描述，但无法过滤 ajax 响应以显示对每个相关子类别 li 的描述。

现在所有子类别的描述都添加到所有 li 中，而不是相关 li。

请帮忙解决这个问题。

感谢和问候

Answer 1

我建议你改变你的方法的一些东西。首先，将您的选择器更改为仅针对lis，而不是内部的a 元素。

$('ul.asd li').each(function() {

然后，将每个 li 的引用保存为函数内部的变量。

var li = $(this);

之后你可以像这样获取url。

var urln= li.find('.sub-cat-name');

最后，在您附加来自 AJAX 调用的新数据的地方，将其附加到 li 变量中。每个 AJAX 调用都将针对它自己的 li 元素。

Answer 2

您可以使用this 来引用每个循环中的列表项：

$('ul.asd li a.sub-cat-name').each(function() {
    var urln = $(this).attr("href"),
        $list = $(this).parent(); // <---- get the target list item here
    $.ajax({
        type: 'GET',
        dataType: 'html',
        url: urln,
        success: function(data) {
            var res = $(data).find('.CategoryDescription').html();
            $list.find("div.allprdct").before('<div class="desc">' + res + '</div>'); // <---add here.
        }
    });    
});