Django 循环上的 Jquery 选择器

Question

所以我有这个

{% for producto in reparto_martes %}
<div class="col-md-3">
<div class="card mb-4 box-shadow product-box">
<img class="card-img-top product-photo" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src={{ producto.foto }} data-holder-rendered="true">
<div class="card-body">
<h4 class="card-text producto_precio">${{ producto.precio }}</h4>
<h5 class="card-text producto_nombre">{{ producto.nombre }}</h5>
<div class="d-flex justify-content-between align-items-center">
<button type="button" class="btn btn-success anadir_button">Añadir</button>
<small class="text-muted"></small>
</div>
</div>
</div>
</div>
{% endfor %}

它看起来像这样：https://gyazo.com/0b329d87af9372250a53ae25347b59b0

当用户单击anadir_button时，我需要选择项目名称。

$(document).ready(function(){
$(".anadir_button").click(function(){
$('.producto_precio').clone().appendTo('#list_pedidos');
});
});

^这个只选择所有三个项目(香蕉，博尔森果，阿尔门德拉斯(

$('.producto_precio').last()clone().appendTo('#list_pedidos');

^而这个只是选择"almendras"。

Answer 1

您需要从当前单击的按钮开始，然后导航到最近的.card-body祖先。现在您可以找到相应的产品。

下面是一个示例：

$(".anadir_button").click(function(e){
console.log($(this).closest('.card-body').find('.producto_nombre').text());
//^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-3">
<div class="card mb-4 box-shadow product-box">
<img class="card-img-top product-photo" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src={{ producto.foto }} data-holder-rendered="true">
<div class="card-body">
<h4 class="card-text producto_precio">$0</h4>
<h5 class="card-text producto_nombre">Bananas</h5>
<div class="d-flex justify-content-between align-items-center">
<button type="button" class="btn btn-success anadir_button">Añadir</button>
<small class="text-muted"></small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow product-box">
<img class="card-img-top product-photo" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src={{ producto.foto }} data-holder-rendered="true">
<div class="card-body">
<h4 class="card-text producto_precio">$0</h4>
<h5 class="card-text producto_nombre">Bolson frutal</h5>
<div class="d-flex justify-content-between align-items-center">
<button type="button" class="btn btn-success anadir_button">Añadir</button>
<small class="text-muted"></small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 box-shadow product-box">
<img class="card-img-top product-photo" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" style="height: 225px; width: 100%; display: block;" src={{ producto.foto }} data-holder-rendered="true">
<div class="card-body">
<h4 class="card-text producto_precio">$0</h4>
<h5 class="card-text producto_nombre">Almendras</h5>
<div class="d-flex justify-content-between align-items-center">
<button type="button" class="btn btn-success anadir_button">Añadir</button>
<small class="text-muted"></small>
</div>
</div>
</div>
</div>
</div>