如何使用JQuery分别为具有相同类的元素添加不同的内容答案

【问题标题】：How to use JQuery to add different content to elements with same class respectively如何使用JQuery分别为具有相同类的元素添加不同的内容
【发布时间】：2026-01-02 00:35:01
【问题描述】：

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

以下是我的代码。所以 ajax 请求正在被正确处理并且能够显示相应的地址，但是所有 <ul class="address_result"> 每次都显示相同的东西，这是有道理的，因为我将 html(data) 添加到类中，因此它的所有元素。有没有办法分别为每个<div class="name_address"> 中的每个名称显示地址，也许添加 id？提前致谢！

JQuery：

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

});

function get_address_success(data, textStatus,jqXHR){
    $('.address_result').html(data);
}

html:

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

django 中的get_address函数：

def get_address(request):
if request.method == "POST":
    company_name = request.POST.get('name','')
else:
    company name = ''
companies = company.objects.filter(name=company_name) #Name different companies can have the same name in this case
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

解决方案：

$(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%}

【问题讨论】：

您的页面中是否有多个.address_result div？
是的，html 中有一个 for 循环，它遍历查询集并显示所有公司名称，每次创建
时。
get_address函数长什么样子？
在描述中添加

标签： javascript jquery html ajax django

【解决方案1】：

是的，你可以对你的 html 生成做这样的事情

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

然后通过使用该 ID 作为您从后端发送的响应的一部分来选择个人 address_result。像这样的json围绕你的存在数据会做

{"name" : "name_of_block_to_change",
 "content" : data}

你的成功回调可以做到这一点

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

【讨论】：

非常感谢您的帮助！我尝试了使用 {{ obj.name }} 将 id 分配给 <ul class="address_result" id="{{ obj.name }}"> 的方式，但直接将 html(data) 添加到 id= '#'+$(this).html() 的元素中，而不是使用 json。（如描述中添加的解决方案）与使用 json 相比有什么缺点吗？
就我而言，这不太可能，因为我在另一个 django 函数中使用了 list = company.objects.values('name').annotate(Count("addresses"))，因此在 for 循环中，list 是一个包含所有 distinct 名称的查询.
不，我认为这是一个更好的解决方案，如果它对你有用的话！

【解决方案2】：

尝试使用id的属性，将id发送到ajax，获取地址并将其添加到下一个address_result 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%}

js:

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

});

function get_address_success(data, textStatus,jqXHR){
    $(el).next('.address_result').html(data);
}

get_address函数：

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

【讨论】：

感谢您的帮助，不胜感激！