Question

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

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

我的问题是我想在＆＃34; -control＆＃34;下使用jQuery追加一个新按钮。 class基于ui-droppable div的ID。

最初，这是我的jQuery代码：

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

它有效，但它附加了＆＃34; Add All＆＃34;按钮到所有两个div（#ab和#xx）。如果我想附加＆＃34; Add All＆＃34;该怎么办？按钮链接给出了ui-droppable div的ID？例如，说ID是#xx。＆＃34;全部添加＆＃34;只会添加到属于＃xx.ui-droppable的.the-controls div中。一个限制是我无法更改标记以使＆＃34;控件＆＃34;成为＆＃34; xx＆＃34;的孩子或＆＃34; ab＆＃34;。

我认为这听起来很简单，但我永远无法让它发挥作用。谢谢你的帮助。：）

Answer 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>');

Answer 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>');

Answer 3

您可以扩展现有的jQuery，如下所示

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

jQuery根据以前的div ID追加

3 个答案: