如何使用jQuery將數據追加到正確的div？

我想了解jQuery，並得到了自己很困惑，如何追加一些新的html數據到正確的div取決於哪個按鈕被點擊。我真的很感激一些指針。我做了一個小提琴here.如何使用jQuery將數據追加到正確的div？

我想追加new_data到名稱列表取決於哪個按鈕被點擊。因此，如果按下button_1，則new_name會附加到#container_1中的跨度，並且如果按下button_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 
    }); 
});

來源

2017-02-13 JulianJ

你可以使用data屬性來檢測哪個div應該被更新。

而且，我清理你的代碼

$(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 
 
    }); 
 
});

<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>

來源

2017-02-13 20:20:51 Mojtaba

太棒了。，真的很清楚，正是我所期待的。謝謝。 – JulianJ

@JulianJ。我很高興我可以幫助:) – Mojtaba

你只是監聽的點擊button_1，所以讓我們將其更改爲接受類按鈕「」的所有按鈕的單擊事件。
我們可以用$(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就是一個例子。

（如果您希望按鈕編號相匹配的DIV ID＃，看看哪些已經爲您提供此功能的答案。我的例子會自動抓取<div>點擊的按鈕後）。

來源

2017-02-13 20:17:38 Santi

奈斯利解釋，很大的教訓。謝謝。 – JulianJ

爲什麼.next沒有找到按鈕後的第一個div？ – JulianJ

它的確如此，或者至少如果能夠正確實施的話。我在答案中包含了一個示例，您可以看看它在哪裏顯示功能按預期工作。如果你想將它添加到與其他跨度相同的div，你可以將'$ nextDiv'改爲這個：'var $ nextDiv = $（this）.next（「div」）。children（「div」）.first（）;' – Santi

繼承人小提琴：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>"); 
    }); 
});

來源

2017-02-13 20:25:26

如何使用jQuery將數據追加到正確的div？

回答

相關問題