jQuery - Verschieben umliegenden <a> Tag nach Element

Question

versucht, dies für mich, um herauszufinden, wie es scheint, wie es jedoch leicht genug sein sollte, es stellt sich heraus, ich bin ein bisschen ein Idiot ...

Grundsätzlich I ist versucht, den Inhalt einen bestimmten zu bewegen ‚einen‘ Tag auf nur außerhalb seiner selbst und dann bewegen, dass ‚a‘ Tag am Ende der umschließenden Figur ...

<figure class="myFigure"> 
    <a href="#"> 
    <img src="#"> 
    </a> 
    <figcaption>Sample Caption</figcaption> 
</figure> 

Wechsel zu ...

<figure class="myFigure"> 
    <img src="#"> 
    <figcaption>Sample Caption</figcaption> 
    <a href="#"></a> 
</figure> 

Beachten Sie, dass es auf einer Seite mehrere Instanzen des obigen gibt, einige mit Links und einige ohne. Ich möchte die ohne einen Link nicht bewirken.

Um zu beginnen Ich habe in jeder Figur ...

$('.myFigure').each(function() { 
    $('a',this).contents().insertBefore('figcaption'); 
}); 

Grüße Ciarán

Answer 1

Um Ihre erwartete Ergebnis jedoch diese Multiples erstellen Instanzen jedes Bild Variationen der folgenden versuchen, Sie können verwendet werden:

$('.myFigure').append(function() { 
    return $(this).children('a').contents().unwrap().end(); 
}); 

Answer 2

ich bestätige dies eine weitaus ‚Verfahren‘ ist Methode als A. Wolff schöne Umsetzung. Doch wie es scheint, wollte man alle Elemente jig um - sie zu sammeln und sie dann in der Reihenfolge wieder Einfügen Sie angegeben haben ein wenig das Gefühl, kann leichter:

$('figure').each(function(){ 
    var $that = $(this); 
    var getimg = $that.find('img'); 
    var getLink = $that.find('a'); 
    var getFig = $that.find('figcaption'); 
    $that.empty().append([ getimg, getFig, getLink ]); 
}); 

Fiddle: https://jsfiddle.net/hrhw1rxt/4/

Answer 3

Sie könnten das unten versuchen, ich nahm an, dass der Link andere Elemente neben Bildern enthalten kann.

$('figure > a').each(function() { 
 
    var 
 
    $this = $(this), 
 
    $parent = $(this).closest('.myFigure'); 
 

 
    $this.children().insertBefore($this); 
 
    $this.appendTo($parent); 
 
})

a { 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<figure class="myFigure"> 
 
    <a href="#"> 
 
    <img src="#"> 
 
    </a> 
 
    <figcaption>Sample Caption</figcaption> 
 
</figure>