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

我建议你转换一些关于你的方法的东西。首先，将您的选择器更改为仅定位li s，而不是内部的a元素。

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

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

var li = $(this);

之后你就可以得到这样的网址了。

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.
        }
    });    
});

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

2 个答案: