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时在成功函数中运行这行代码：

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

Answer 2

你正在运行这个：

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

之前：

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

因为ajax运行异步并正在等待回调....

解决方案woulkd是要

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

回调中的

在<li>中找到ajax </li>中的值

2 个答案: