jQuery разместить тег вокруг других тегов

Question

Возможно ли выполнить следующее с помощью jQuery?

Это обычный HTML код:

<figure> 
    <a href=""> 
     <img src="" alt="More info" title=""> 
    </a> 
    <figcaption>More info</figcaption> 
</figure> 

Но я хочу, чтобы Jquery это сделать с ним:

<figure> 
    <a href=""> 
     <img src="" alt="More info" title=""> 
     <figcaption>More info</figcaption> 
    </a> 
</figure> 

Answer 1

Вы можете использовать appendTo(), когда у вас есть несколько элементов. .each() можно использовать для итерации. Здесь найдите предыдущий якорь, используя различные методы обхода DOM, затем используйте appendTo().

$('figcaption').each(function() { 
 
    var prevAnchor = $(this).closest('figure').find('a'); //$(this).prev('a'); 
 
    $(this).appendTo(prevAnchor); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<figure> 
 
    <a href=""> 
 
    <img src="" alt="More info" title=""> 
 
    </a> 
 
    <figcaption>More info</figcaption> 
 
</figure> 
 
<figure> 
 
    <a href=""> 
 
    <img src="" alt="More info" title=""> 
 
    </a> 
 
    <figcaption>More info</figcaption> 
 
</figure>

Answer 2

TRY: Вы можете использовать .append() метод добавления figcaption внутри тега привязки. см ниже код

$('figure a').append('figure figcaption'); 

Answer 3

Да, вы можете использовать что-то вроде: .appendTo();

$(document).ready(function() { 
 
    $("figcaption").appendTo("a"); 
 
});

 
<figure> 
 
    <a href=""> 
 
    <img src="" alt="More info" title=""> 
 
    </a> 
 
    <figcaption>More info</figcaption> 
 
</figure> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>