Question

$(document).ready(function()
{
    $('button').on('click', function()
    {            
        $('.container').children().eq(1).append($('p.important').text());
    });
});

<div class="container">
    <p>1</p>
    <p>2</p>

    <button>Lawl, a button.</button>

    <p>3</p>
    <p class="important">Text to be copied</p>
</div>

I want to find the closest upper p tag to my button. For example, if I move button under <p>1</p>, it should append values to it. If I move my button to bottom, it should add append values to <p>3</p>.

Is it possible with my current HTML?

Answer 1

You can use next or prev method.

.next( [selector] ): Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

.prev( [selector] ): Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector.

$('.container button').on('click', function(e) {
      e.preventDefault(); 
      var txt = $('p.important').text();
      $(this).next('p').append(txt);    
});