jQuery append based on previous div ID

Question

OK, supposing I have this markup:

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

My problem is that I would like to append a new button using jQuery under "the-controls" class based the ID of ui-droppable div.

Originally, this is my jQuery code:

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

It works but it appends the "Add All" button to all the two divs (#ab and #xx). What if I would like to append the "Add All" button link given the ID of ui-droppable div? For example say the ID is #xx. The "Add All" will only be added on the .the-controls div belonging to #xx.ui-droppable. One limitation is that I could not change the markup to let the "the-controls" to be the child of "xx" or "ab".

I think this sounds simple, but I could never get this to work. Thanks for all the help. :)

Answer 1

You could just do:

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

You can use adjacent sibling selector like:

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