mit JavaScript anhängen mehrere divs

Question

Ich habe ein Wordpress-Plugin zu bewegen, die einen Schieber in einer Ausgabereihenfolge wie folgt erstellt:

<ul> 
    <li> 
     <img src=""> 
     <div class="wp1s-caption-wrapper"> 
      <div class="wp1s-caption-title"> 
      <div class="wp1s-caption-content"> 
    </li> 
    <!-- each slide as this same setup within the li, currently I have three slide so therefore 3 sets of the above li--> 
</ul> 

Nun, was ich ein div tun müssen, ist ein (hh-Beschriftung) in die div-Klasse wp1s-caption-wrapper und fügen Sie dann wp1s-caption-title und wp1s-caption-content ein. Um dies zu tun mich aber wie so hängen Sie zu verwenden:

var j = jQuery.noConflict(); 
j(document).ready(function(){ 
    j(".wp1s-caption-wrapper").append(j(".hh-caption")); 
    j(".hh-caption").append(j(".wp1s-caption-title")); 
    j(".hh-caption").append(j(".wp1s-caption-content")); 
}); 

Nun ist diese tritt in der div hh-Beschriftung in jedem des wp1s-caption-wrapper divs, aber es legt jeden wp1s-caption-title und wp1s-caption-content, das erscheint. Ich habe drei Schieberegler mit Titel und Beschriftungen, so was passiert, ist jeder hh-wrapper enthält 3 Titel und Untertitel. Ich will nur den Titel und den Inhalt direkt über jedem hh-caption (puts hh-caption unter Titel und Inhalt anfügen), um es nicht alle Vorkommen zu bewegen.

Ich möchte nicht die Plugins codedirectly bearbeiten, da Updates wahrscheinlich erfordern würde ich alles neu zu machen, ich würde es mit Javascript in meinen eigenen Seiten tun wäre leichter zu ändern, wenn Updates etwas geändert.

Hat jemand irgendwelche Vorschläge oder weisen Sie mich in die richtige Richtung?

Answer 1

Ich habe nicht wirklich verstanden, was Sie versuchen, aber zu meinem Verständnis zu tun, werde ich Sie bitten, appendTo, um zu versuchen, anstatt append

var j = jQuery.noConflict(); 
j(document).ready(function(){ 

    j(j('.hh-caption').appendTo('.wp1s-caption-wrapper'); 

    j(j('.wp1s-caption-title').appendTo('.hh-caption'); 

}); 

Answer 2

Wenn ich die Frage richtig verstanden habe, ich glaube, das Problem ist, dass Sie sind Markieren Sie alle Elemente und fügen Sie dann Ihren neuen Inhalt hinzu. Sie müssen das genaue Element angeben, an das Sie anhängen möchten. Normalerweise würde ich sagen, Gebrauch ein id aber ich verstehe Sie nicht wollen, den vorhandenen Code so ändern, sondern können zwei Dinge tun:

One Anfügen: Fügen Sie alles in einem Rutsch, ziehe ich diese als weniger Code , aber abhängig davon, wie komplex der HTML-Code ist, ist dies möglicherweise nicht geeignet.

Mehrfachanfügung: Fügen Sie die Beschriftung Wrapper, dann innerhalb dass der Titel usw. Dies setzt voraus, den Sie hinzufügen, es immer bis zum Ende und verwendet jquery .last()

Ich hoffe, das hilft, sorry seine etwas langatmig, aber wollte es gut demonstrieren.

$("#addCaption1").click(function() { 
 
    captionImage = "https://images.unsplash.com/photo-1473182446278-fa0683411d10?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="; 
 
    captionTitle = "This is a new caption"; 
 
    captionContent = "This caption was added via jquery."; 
 
    addCaption1(captionImage, captionTitle, captionContent); 
 

 
}); 
 

 
$("#addCaption2").click(function() { 
 
    captionImage = "https://images.unsplash.com/photo-1462834026679-7c03bf571a67?dpr=1&auto=compress,format&fit=crop&w=1199&h=791&q=80&cs=tinysrgb&crop="; 
 
    captionTitle = "This is a new caption"; 
 
    captionContent = "This caption was added via jquery."; 
 
    addCaption2(captionImage, captionTitle, captionContent); 
 
}); 
 

 

 
function addCaption1(imgUrl, title, content) { 
 
    var caption = '<li><img src=' + imgUrl + '><div class="wp1s-caption-wrapper"><div class="wp1s-caption-title"><strong>' + title + '</strong><div class="wp1s-caption-content"><p>' + content + '</p></div></div></div></li>'; 
 

 
    $("#sidebar").append(caption); 
 
} 
 

 
function addCaption2(imgUrl, title, content) { 
 
    var captionWrapper = '<li><img src=' + imgUrl + '><div class="wp1s-caption-wrapper"></div></li>'; 
 
    $("#sidebar").append(captionWrapper); 
 
    $(".wp1s-caption-wrapper").last().append('<div class="wp1s-caption-title"><strong>' + title + '</strong></div>'); 
 
    $(".wp1s-caption-wrapper").last().find(".wp1s-caption-title").append('<div class="wp1s-caption-content"><p>' + content + '</p>'); 
 
}

button { 
 
    padding: 5px; 
 
} 
 
ul { 
 
    list-style: none; 
 
} 
 
li { 
 
    margin: 5px; 
 
    padding: 5px; 
 
    background: #ccc; 
 
    color: #333; 
 
    width: 180px; 
 
    display: inline-block; 
 
} 
 
li img { 
 
    width: 180px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<button id="addCaption1">One append</button> 
 
<button id="addCaption2">Multiple appends</button> 
 
<ul id="sidebar"> 
 
    <!-- Item 1 --> 
 
    <li> 
 
    <img src="https://images.unsplash.com/photo-1473220464492-452fb02e6221?dpr=1&auto=compress,format&fit=crop&w=1199&h=800&q=80&cs=tinysrgb&crop="> 
 
    <div class="wp1s-caption-wrapper"> 
 
     <div class="wp1s-caption-title"><strong>This is a title for Item 1</strong> 
 
     <div class="wp1s-caption-content"> 
 
      <p>This is some content for Item 1</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <!-- Item 2 --> 
 
    <li> 
 
    <img src="https://images.unsplash.com/photo-1467791702337-32e58d17bb6d?dpr=1&auto=compress,format&fit=crop&w=1199&h=796&q=80&cs=tinysrgb&crop="> 
 
    <div class="wp1s-caption-wrapper"> 
 
     <div class="wp1s-caption-title"><strong>This is a title for Item 2</strong> 
 
     <div class="wp1s-caption-content"> 
 
      <p>This is some content for Item 2</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <!-- Item 3 --> 
 
    <li> 
 
    <img src="https://images.unsplash.com/photo-1473496169904-658ba7c44d8a?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> 
 
    <div class="wp1s-caption-wrapper"> 
 
     <div class="wp1s-caption-title"><strong>This is a title for Item 3</strong> 
 
     <div class="wp1s-caption-content"> 
 
      <p>This is some content for Item 3</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>

Ich empfehle in voller Seite ausgeführt wird.