Pablo Malynovytch Pablo Malynovytch - 3 months ago 40
HTML Question

How to append data in the next <li>

i want to append data on the closest li on click...I tried next,parent,closest,find and nothing.

Here is my jsfiddle...

My jquery:

$(document).on('click', '.btnMoreInfo', function(){
$(this).closest(".test").next('.infoCatcher').append('<div class="moreInfo info">More Content..' + '</div>');

Is not working. may i know why and how do i fix it? thanks


With closest() you traverse just up the three DOM, since .test is a sibling of the parent for your button you don't find anything.

You need something like:

$(this).parent().next().find('.infoCatcher').append('<div class="moreInfo info">More Content..' + '</div>');

That will be:

  • $(this) the actual button
  • .parent() up to the li parent
  • .next() target the next li which on your markup is the .test
  • .find('.infoCatcher') and on the div infoCatcher append