jQuery - 按钮添加数据到兄弟

我有一个按钮，我想用来添加数据到列表。当我硬编码我想要它去的div时，我设法让它工作，但我有多个按钮来更新不同的div。我想使用DRY代码，所以我试图让每个按钮只更新其兄弟。jQuery - 按钮添加数据到兄弟

HTML

<div class="box"> 
    <a class="btn" href="#">Export</a> 
    <div class="title"> 
     EXPORT LOG 
    </div> 
    <div class="content"> 
     <ul class="box-list"> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
      <li>Text</li> 
     </ul> 
    </div> 
</div>

的jQuery（注释掉的代码更新所有div，不只是兄弟姐妹）

$(".btn").click(function() { 
    $('<li>added text</li><li>more added text</li>').prependTo().parent().find(".box-list"); 

    // $('<li>added text</li><li>more added text</li>').prependTo(".box-list") 
});

来源

2016-12-06 Tristan

请加小提琴或代码片段 –

@ T.Bragg没有，他们并不需要，发布他们的代码就好了。 –

在jQuery的功能，您可以参考$(this)这将是特别.btn被点击。

喜欢的东西：

$(".btn").click(function() { 
    $(this).parent().find(".box-list").prepend('<li>added text</li><li>more added text</li>')

来源

2016-12-07 00:00:46 tywhang

谢谢@tywhang。完美工作 – Tristan

@Tristan很高兴它的工作！现在，如果你可以“接受”这个答案，那将不胜感激。：D – tywhang

这是左边的tick @tywhang吗？ – Tristan

您正在寻找这样的事情： http://codepen.io/anon/pen/qqYmBj

我所做的就是更新你的锚标签div标签（只是为了去除造型）什么，并增加了一些CSS。我还打破了你的代码，使其更具可读性。

$(".btn").click(function() { 
    myBox = $ (this).parent().find('.box-list'); #Finds parent element of the btn and then finds the .box-list element from that parent element. 
    newEl = $ ("<li>Added text</li><li>More Added text</li>"); #New element(s) to add 
    newEl.appendTo(myBox);#Adds to the box 
});

来源

2016-12-07 00:05:53 Michael

或者，您可以在HTML中添加更多一点的逻辑，并使用它来确保您总能找到正确的列表。

$(".btn").click(function() { 
 
    var containerID = $(this).attr('rel'); 
 
    $('<li>added '+containerID+' text</li>').prependTo('#'+containerID+' .box-list'); 
 
//  $('<li>added text</li><li>more added text</li>').prependTo(".box-list"); 
 

 
    // $('<li>added text</li><li>more added text</li>').prependTo(".box-list") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <a class="btn" rel="export" href="#">Export</a> 
 
    <a class="btn" rel="import" href="#">Import</a> 
 
    <div class="content" id="export"> 
 
    <h2>Export log</h2> 
 
     <ul class="box-list"> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
     </ul> 
 
    </div> 
 
    <div class="content" id="import"> 
 
    <h2>Import log</h2> 
 
     <ul class="box-list"> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
      <li>Text</li> 
 
     </ul> 
 
    </div> 
 
</div>

来源

2016-12-07 00:06:53 junkfoodjunkie

jQuery - 按钮添加数据到兄弟

回答

相关问题