javascript - 从 ajax 中查找 中的值

Question

我通过函数调用 Ajax。当ajax完成后，它无法在<li>中找到值

使用ajax的函数:

function findList(postCode) {
        $.getJSON("/list/" + postCode,
            function(data) {
                if (data.length > 1)
                {
                    $.each (data, function (index, element) {
                        if (element != "address") {
                            $('#order-list-form').append($("<li></li>").attr("value",data[index].value).text(data[index].name));
                        }
                    });
                }
            });
}

如果页面已加载，请从 $("#PostCode").val() 中查找值然后执行findList() ，完成后，需要在 <li> 中查找值 DUS123已通过 ajax 填充，然后添加类 selected-address - 这似乎不起作用。

if ($("#PostCode").val() != "") {

   // Execute Ajax
   findList( $("#PostCode").val() )

   // Not working here
   // When Ajax completed, I want to find find the value in <li> and add class selected-address
   $("#order-list-form li").find('value="DUS123").addClass("selected-address");
}

Answer 1

find 调用中的选择器无效。要搜索属性，您需要用 [] 包裹它们:

$("#order-list-form li").find('[value="DUS123"]').addClass("selected-address");

但是，由于您还直接在 li 元素本身上设置属性，因此您需要在该元素上查找该属性，而不是在上述选择器将执行的子元素上查找该属性:

$('#order-list-form li[value="DUS123"]').addClass("selected-address");

另一个问题是，由于 ajax 发送和处理请求的方式，这行代码将在 ajax 请求完成之前运行，因此在元素被附加到文档。要解决此问题，您有两种选择。快速而肮脏的方法是使 ajax 请求同步，为此我将让您研究 getJson和 ajax方法来了解如何做。

第二种更正确的方法是在调用 getJson 时在 success 函数中运行这行代码:

function findList(postCode) {
    $.getJSON("/list/" + postCode,
        function(data) {
            if (data.length > 1)
            {
                $.each (data, function (index, element) {
                    if (element != "address") {
                        $('#order-list-form').append($("<li></li>").attr("value",data[index].value).text(data[index].name));

                    }
                });
            }
            $('#order-list-form li[value="DUS123"]').addClass("selected-address");
        });
}

或者您可以允许您的 findList 函数接受回调，并使用它:

function findList(postCode, callback) {
    $.getJSON("/list/" + postCode,
        function(data) {
            if (data.length > 1)
            {
                $.each (data, function (index, element) {
                    if (element != "address") {
                        $('#order-list-form').append($("<li></li>").attr("value",data[index].value).text(data[index].name));

                    }
                });
            }
            callback();
        });
}

if ($("#PostCode").val() != "") {
    findList( $("#PostCode").val(), function() {
        $('#order-list-form li[value="DUS123"]').addClass("selected-address");
    });
}