如何使用jQuery将数据追加到正确的div？

我试图理解jQuery，但我对如何理解jQuery感到非常困惑 根据单击的按钮，将一些新的html数据附加到正确的div中。我真的很想得到一些建议。我做了一把小提琴

我想根据单击的按钮将新的_数据附加到名称列表中。因此，如果按下按钮_1，新的_名称将附加到

#container_1

中的跨距，如果按下按钮_2，数据将附加到

#container_2

中的跨距

我意识到我很难弄清楚按下了哪个按钮，如何找到我想要放置新数据的div，以及如何附加它。我已经被各种各样的方法弄得喘不过气来了我不能直接思考

html

按
姓名1
姓名2
姓名3
按
姓名4
姓名(五)
姓名6

jQuery

$(document).ready(function() {
    $("#button_1").click(function() { //Find which button was clicked
        var find_div=$(".button").attr("id"); //Trying to find the div 
        $(find_div).append.html("<span>new_name</span>"); // Append the data to the div
    });
});

$（文档）.ready（函数（）{
$（“#按钮_1”）。单击（函数（）{//查找单击的按钮
var find_div=$（“.button”）.attr（“id”）；//正在尝试查找该div
$（find_div.append.html（“new_name”）；//将数据附加到div
});
});

您只在监听

按钮\u 1

的点击，因此让我们将其更改为接受类“button”的所有按钮的点击事件

我们可以使用

$（this）

获取单击的按钮，使用

.next（“div”）

获取下一个

。我们将此存储为

$nextDiv

然后，我们可以使用

$nextDiv.append（）

将HTML附加到

find\u div

---

$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{
var$nextDiv=$（this.next（“div”）；//查找下一个div
$nextDiv.append（“new_name”）；//将数据附加到div
});
});

就你的目的而言，这应该是可行的。这就是一个例子

（如果希望按钮id与div id匹配，请参阅为您提供此功能的其他答案。我的示例将在单击按钮后自动获取

。）

您只在监听

按钮\u 1

的点击，因此让我们将其更改为接受类“button”的所有按钮的点击事件

我们可以使用

$（this）

获取单击的按钮，使用

.next（“div”）

获取下一个

。我们将此存储为

$nextDiv

然后，我们可以使用

$nextDiv.append（）

将HTML附加到

find\u div

---

$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{
var$nextDiv=$（this.next（“div”）；//查找下一个div
$nextDiv.append（“new_name”）；//将数据附加到div
});
});

就你的目的而言，这应该是可行的。这就是一个例子

---

（如果您希望按钮id与div id匹配，请参阅为您提供此功能的其他答案。我的示例将在单击按钮后自动获取

。

您可以使用

data

属性来检测应该更新哪个div

还有，我清理了你的代码

$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{//查找单击了哪个按钮
var，其中_id=$（this）.data（'id'）；
$（“#container_uu”+哪个_id）.append（“new_name”）；//将数据附加到div
});
});

按
姓名1
姓名2
姓名3
按
姓名4
姓名(五)
姓名6
您可以使用
数据
属性来检测应该更新哪个div

还有，我清理了你的代码


$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{//查找单击了哪个按钮
var，其中_id=$（this）.data（'id'）；
$（“#container_uu”+哪个_id）.append（“new_name”）；//将数据附加到div
});
});

按
姓名1
姓名2
姓名3
按
名称\u 4
姓名(五)
姓名6
这里有一把小提琴：

按
姓名1
姓名2
姓名3
按
姓名4
姓名(五)
姓名6
$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{//查找单击了哪个按钮
var data=$（this.attr（“data”）；//正在尝试查找div
var find_div=$（“#”+数据）；
$（find_div）.append（“new_name”）；
});
});
这里有一把小提琴：

按
姓名1
姓名2
姓名3
按
姓名4
姓名(五)
姓名6
$（文档）.ready（函数（）{
$（“.button”）。单击（函数（）{//查找单击了哪个按钮
var data=$（this.attr（“data”）；//正在尝试查找div
var find_div=$（“#”+数据）；
$（find_div）.append（“new_name”）；
});
});
太好了，非常清楚，正是我想要的。谢谢你，朱利安。我很高兴能帮上忙：）太好了，非常清楚，正是我想要的。谢谢你，朱利安。我很高兴我能帮上忙：）解释得很好，教训很好。谢谢。为什么不呢。下一步在按钮后找到第一个div？它找到了，或者如果实现正确，至少会找到。我的回答中包含了一个示例，您可以看看它在何处显示了预期的功能。如果您试图将其添加到与其他跨度相同的div中，可以将
$nextDiv
改为：
var$nextDiv=$（this）.next（“div”）.children（“div”）.first（）很好的解释，很好的教训。谢谢。为什么不呢。下一步在按钮后找到第一个div？它找到了，或者如果实现正确，至少会找到。我的回答中包含了一个示例，您可以看看它在何处显示了预期的功能。如果您试图将其添加到与其他跨度相同的div中，可以将
$nextDiv
改为：
var$nextDiv=$（this）.next（“div”）.children（“div”）.first（）
$(document).ready(function() {
    $("#button_1").click(function() { //Find which button was clicked
        var find_div=$(".button").attr("id"); //Trying to find the div 
        $(find_div).append.html("<span>new_name</span>"); // Append the data to the div
    });
});

$(document).ready(function() {
    $(".button").click(function() {
        var $nextDiv = $(this).next("div"); //Find the next div 
        $nextDiv.append("<span>new_name</span>"); // Append the data to the div 
    });
});

<button class="button" id="button_1" data='container_1'>press</button>
<div class="some_div" id="div_1">
<div class="d-flex align-items-start" id="container_1">

  <span>name_1</span>
  <span>name_2</span>
  <span>name_3</span>

</div>
</div>
<button class="button" id="button_2" data='container_2'>press</button>
<div class="some_div" id="div_2">
<div class="d-flex align-items-start" id="container_2">

<span>name_4</span>
<span>name_5</span>
<span>name_6</span>

</div>
</div>

$(document).ready(function() {
    $(".button").click(function() { //Find which button was clicked
        var data = $(this).attr("data"); //Trying to find the div 
       var find_div = $('#' + data);   
        $(find_div).append("<span>new_name </span>"); 
    });
});