使用Javascriptを私はこのような出力順にスライダーを作成するワードプレスのプラグインを持って

Question

複数のdivを移動するために追加しますdivクラスwp1s-caption-wrapperを開き、wp1s-caption-titleとwp1s-caption-contentをその中に挿入します。そのように追加使用するのに、この私を行うには：

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")); 
}); 

は今、これはwp1s-caption-wrapper div要素のそれぞれにのdiv HH-キャプションに入るが、それが表示され、すべてのwp1s-caption-titleとwp1s-caption-contentを配置します。私はタイトルとキャプションを持つ3つのスライダーを持っているので、それぞれhh-wrapperには3つのタイトルとキャプションが含まれています。私はタイトルと内容のそれぞれを直接hh-captionの上に置いて（タイトルと内容の下にhh-captionを追加してください）、すべての出来事ではなくその中に移動してください。

私は自分のページのjavascriptでそれをやっても、更新が何か変更された場合に変更するのが簡単になるでしょう。

誰にでも提案がありますか、正しい方向に向いていますか？

Answer 1

私は本当にあなたがやろうとしているものを理解していない私の理解するが、私は私が正しく質問を理解していれば、私はあなたがあなたの問題があるしていると思うの代わりに追記

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

のappendToをしようとするように求めますすべての要素を選択し、新しいコンテンツを追加します。追加したい要素を正確に指定する必要があります。

一つ追加：通常ので、代わりに、あなたは2つのことを行うことができます私はid使用することを言うだろうが、私は、既存のコードを変更する必要はありません理解し、私はその少ないコードとしてこれを好む、一度にすべてを追加しますしかし、htmlがどの程度複雑になっているかによっては、これは適切ではないかもしれません。

複数の追加は：など、その後タイトルその内、キャプションラッパーを追加。これは、あなたが常に最後に追加されていると仮定し、使用していますjqueryの.last()

私はこれが役に立てば幸い、申し訳ありませんその少し長いが、それをうまく説明したかったのです。

$("#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>

私は、フルページで実行されているお勧めします。