Jqueryでdivを変更する

Question

現在、jqueryを使用していくつかの位置を変更しようとしています（divs）。私の主な考え方は、左の矢印をクリックすると、特定の場所に割り当てられたdivが左のものと入れ替わります。もう一度クリックすると、divの場所が左にスワップされます。右矢印をクリックすると、同じことが起こりますが、右側の要素については起こります。ここで

は私のHTMLコードです：

$("left").click(function() { 
    $(hilight-two).replaceWith("<div>" + $(text-big).text() + "</div>"); 
}); 

$("right").click(function() { 
    $(hilight-two).replaceWith("<div>" + $(text-big).text() + "</div>"); 
}); 

私は順番にJSフィドルを添付しました：

<input type ="radio" name ="tabs" id = "tab-2"> 
<label for="tab-2"><i class="fa fa-newspaper-o fa-3x" aria-hidden="true" id="paper"></i><div class ="news">LATEST NEWS</div></label> 
<div class ="tab-content-two"> 
    <h3 id="latest-news">Latest News</h3> 
    <i class="fa fa-angle-left" id="left"></i> 
    <i class="fa fa-angle-right" id="right"></i> 

    <img src = "img/1.jpg" id ="first-img"> 
    <div class ="hilight" id="img-text"> 
     <h4 id="news">Latest News Story<br>Title Example</h4> 
    </div> 

    <img src ="img/2.jpg" id ="second-img"> 
    <div class ="hilight-two"id="img-text"> 
     <h4 id="news">Latest News Story<br>Title Example</h4> 
    </div> 

    <img src ="img/3.jpg" id ="third-img"> 
    <div class ="hilight-big" id ="full-text"> 
     <h4 id="news-big">Latest News Story<br>Title Example</h4> 
     <p id="date">14/02/2016</p> 
     <p id ="text-big">Lorem ipsum dolor sit amet,<br> 
      consectetur adipiscing elit.<br> 
      Phasellus imperdiet orci.. 
      <button type="button" id ="button-reading">CONTINUE READING <i class="fa fa-angle-right" id="reading"></button></i> 
     </p> 


    </div> 

    <img src ="img/4.jpg" id ="fourth-img"> 
    <div class ="hilight-three"d="img-text"> 
     <h4 id="news">Latest News Story<br>Title Example</h4> 
    </div> 
</div> 

そして、ここでは、私はこれを達成するために構築しようとしているjqueryのですより良いアイデアを持っている。 JS Fiddle

ここでは、それは同様に元のバージョンにどのように見えるの悪い作成した図面である：

Answer 1

私はHILIGHTクラスのグループへのすべてのdivを作り、

$("#left").click(function() { 
    var news = $(".hilight"); 
    var head = news.first().html(); 
    var length = news.length; 
    for(var i = 0; i < length - 1; i++) { 
     news.eq(i).html(news.eq(i + 1).html()); 
    } 
    news.eq(length - 1).html(head); 
}); 

$("#right").click(function() { 
    var news = $(".hilight"); 
    var tail = news.last().html(); 
    var length = news.length; 
    for(var i = length - 1; i > 0; i--) { 
     news.eq(i).html(news.eq(i - 1).html()); 
    } 
    news.eq(0).html(tail); 
}); 

にあなたのクリックハンドラを修正しました

私はあなたのCSSとあなたのhtmlをより多くのクラスとより少ないIDを使用するように変更しました。ここで がうまくいけば、これはあなたが左の画像をクリックすると