Question

我正在尝试理解jQuery并让自己对如何变得如此困惑根据单击的按钮将一些新的html数据附加到正确的div中。我真的很感激一些指示。我做了一个小提琴here.

我想根据点击的按钮将new_data附加到名称列表中。因此，如果按下button_1，则会将新名称附加到#container_1中的跨度，如果按下了按钮_2，则会将数据附加到#container_2中的跨度。

我意识到我无法弄清楚按下了哪个按钮，如何找到我要放置新数据的div以及如何追加它。我已经过度使用不同的方法，我无法直接思考，

HTML

<button class="button" id="button_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">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>

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

Answer 1

您只是在听取button_1点击次数，因此我们将其更改为接受所有按钮的点击事件＆＃34;按钮＆＃34;
我们可以使用$(this)来获取点击的按钮，.next("div")可以获得下一个<div>。我们将其存储为$nextDiv。
然后我们可以使用$nextDiv.append()将HTML附加到find_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 
    });
});

为了您的目的，这应该工作。 Here就是一个例子。

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

Answer 2

您可以使用data属性来检测应更新哪个div。

另外，我清理了你的代码

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" id="button_1" data-id="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-id="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>

＆＃13;

Answer 3

这是一个小提琴：https://jsfiddle.net/Darin_Cardin/hf6qLycv/4/

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

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

3 个答案: