基于之前的 div ID 的 jQuery 追加答案

【问题标题】：jQuery append based on previous div ID基于之前的 div ID 的 jQuery 追加
【发布时间】：2014-10-08 04:24:02
【问题描述】：

好的，假设我有这个标记：

<div class="ui-sortable ui-droppable" id="ab"> Test </div> 
<div class="the-controls">
     <a class="button test-remove" href="javascript:;">Remove</a>
     <a class="button button-primary test-export" href="javascript:;">Export</a>
</div>

<div class="ui-sortable ui-droppable" id="xx"> Test </div> 
<div class="the-controls">
     <a class="button test-remove" href="javascript:;">Remove</a>
     <a class="button button-primary test-export" href="javascript:;">Export</a>
</div>

我的问题是我想使用 jQuery 在“the-controls”类下添加一个基于 ui-droppable div 的 ID 的新按钮。

原来，这是我的 jQuery 代码：

jQuery('.the-controls .test-remove').after('<a class="button-primary test-elements-add-all" href="javascript:;">Add All</a>');

它可以工作，但它会将“全部添加”按钮附加到所有两个 div（#ab 和 #xx）。如果我想在给定 ui-droppable div 的 ID 的情况下附加“全部添加”按钮链接怎么办？例如说 ID 是#xx。 “全部添加”只会添加到属于#xx.ui-droppable 的.the-controls div。一个限制是我无法更改标记以让“the-controls”成为“xx”或“ab”的子级。

我认为这听起来很简单，但我永远无法让它发挥作用。感谢所有的帮助。 :)

【问题讨论】：

标签： jquery

【解决方案1】：

你可以这样做：

var _uiId = "xx"; //variable value
jQuery('#' + _uiId).next('.the-controls').children('.test-remove').after('<a class="button-primary test-elements-add-all" href="javascript:;">Add All</a>');

【讨论】：

【解决方案2】：

您可以使用adjacent sibling selector 喜欢：

var id ="xx";
$("#"+id+"+ .the-controls").find('.test-remove').after('<a class="button-primary test-elements-add-all" href="javascript:;">Add All</a>');

【讨论】：

您在find() 通话中错过了第一个'，请更正。
@BhushanKawadkar 谢谢 :)

【解决方案3】：

您可以像下面这样扩展现有的 jQuery

jQuery('#xx').next('.the-controls').find('.test-remove').after('<a class="button-primary test-elements-add-all" href="javascript:;">Add All</a>');

【讨论】：