Javascript 如何使用JQuery分别向同一类的元素添加不同的内容

我使用django创建了一个具有属性name和address的模型company，并且只显示查询集中所有公司的名称。我希望jquery在单击名称时显示相应的地址（通过ajax）

下面是我的代码。因此，ajax请求被正确处理，并且能够显示相应的地址，但是所有的

每次都显示相同的内容，这是有意义的，因为我将

html（data）

添加到类中，从而添加到它的所有元素中。是否有办法分别显示每个

中每个姓名的地址，或者添加id？提前谢谢

JQuery：

html:

解决方案：

$(function(){
    $('.name').on('click', function(){
        var Name=$(this).html();
        $.ajax({
            type: "POST",
            url: "/#link to backend get_address function/",
            data:{
                'name': Name,
                'csrfmiddlewaretoken':$('input[name=csrfmiddlewaretoken]').val()
            },
            success: get_address_success,
            datatype:'html'
        });
        function get_address_success(data, textStatus,jqXHR)
        {
            $("#"+Name).html(data);
        }
    });

});




{% for obj in list %}
<div>
    <h4 class="name">{{ obj.name }}</h4>
    <ul class="address_result" id="{{obj.name}}"></ul>
</div>
{% endfor%}

$（函数（）{
$（'.name'）。在（'click'，function（）上{
var Name=$（this.html（）；
$.ajax({
类型：“POST”，
url:“/#链接到后端获取地址函数/”，
数据：{
“名称”：名称，
'csrfmiddlewaretoken'：$（'input[name=csrfmiddlewaretoken]'）。val（）
},
成功：获得成功的地址，
数据类型：'html'
});
函数获取地址成功（数据、文本状态、jqXHR）
{
$（“#”+Name）.html（数据）；
}
});
});
{列表%中obj的%s}
{{obj.name}

{%endfor%}

是的，您可以对html生成执行类似的操作

<div id="{{ obj.name }}" class="name_address">

你的成功可以做到这一点

function get_address_success(data, textStatus,jqXHR){
     var id = data["name"];
     $('#'+id+' .address_result').html(data["content"]);
}

---

是的，您可以对html生成执行类似的操作

<div id="{{ obj.name }}" class="name_address">

你的成功可以做到这一点

function get_address_success(data, textStatus,jqXHR){
     var id = data["name"];
     $('#'+id+' .address_result').html(data["content"]);
}

---

尝试对id使用属性，将id发送到ajax，获取地址并将其添加到下一个地址\u结果ul:

{% for obj in list %}
<div class="name_address">
    <h4 class="name" data-id="{{obj.id}}">{{ obj.name }}</h4>
    <ul class="address_result"></ul>
</div>
{% endfor%}

获取地址函数：

def get_address(request):
if request.method == "POST":
    company_name = request.POST.get('name','')
    company_id = request.POST.get('id','')
else:
    company name = ''
companies = company.objects.filter(name=company_name).filter(id=company_id) 
context = {
    'companies':companies
}
return render_to_response('ajax_get_address.html', context) #ajax_get_address.html just returns all companies' addresses that correspond to the name & id

---

尝试对id使用属性，将id发送到ajax，获取地址并将其添加到下一个地址\u结果ul:

{% for obj in list %}
<div class="name_address">
    <h4 class="name" data-id="{{obj.id}}">{{ obj.name }}</h4>
    <ul class="address_result"></ul>
</div>
{% endfor%}

获取地址函数：

def get_address(request):
if request.method == "POST":
    company_name = request.POST.get('name','')
    company_id = request.POST.get('id','')
else:
    company name = ''
companies = company.objects.filter(name=company_name).filter(id=company_id) 
context = {
    'companies':companies
}
return render_to_response('ajax_get_address.html', context) #ajax_get_address.html just returns all companies' addresses that correspond to the name & id

---

您的页面中是否有多个

.address\u result

div？是的，html中有一个for循环，每次创建一个时，它都会遍历查询集并显示所有公司名称。get\u address函数看起来如何？添加到描述中是否有多个

.address\u result

div？是的，html中有一个for循环，每次创建一个时，它都会迭代查询集并显示所有公司名称。get_address函数是什么样子的？添加到Description中感谢您的帮助！我尝试了用{obj.name}将id分配给

，但直接将

html（data）

添加到id=

'.+$（this）.html（）

的元素中，而不是使用json。（正如在描述中添加的解决方案）与使用json相比，这有什么缺点吗？在我的例子中，这不太可能，因为我在另一个django函数中使用了

list=company.objects.values（'name'）。annotate（Count（“addresses”）

，因此在for循环中，

list

是一个具有所有不同名称的查询。不，我认为这是一个更好的解决方案，如果它对你有用的话！非常感谢你的帮助！我尝试了用{obj.name}将id分配给

，但直接将

html（data）

添加到id=

'.+$（this）.html（）

的元素中，而不是使用json。（正如在描述中添加的解决方案）与使用json相比，这有什么缺点吗？在我的例子中，这不太可能，因为我在另一个django函数中使用了

list=company.objects.values（'name'）。annotate（Count（“addresses”）

，因此在for循环中，

list

是一个具有所有不同名称的查询。不，我认为这是一个更好的解决方案，如果它对你有用的话！谢谢你的帮助，谢谢！谢谢你的帮助，谢谢！

def get_address(request):
if request.method == "POST":
    company_name = request.POST.get('name','')
    company_id = request.POST.get('id','')
else:
    company name = ''
companies = company.objects.filter(name=company_name).filter(id=company_id) 
context = {
    'companies':companies
}
return render_to_response('ajax_get_address.html', context) #ajax_get_address.html just returns all companies' addresses that correspond to the name & id