帶jQuery的多開關標籤

請幫助我，我需要在DOM結構中替換（切換）標籤。我有這個：帶jQuery的多開關標籤

<div class="wrap"> 
    <ul> 
     <li> 
      <div class="block"> 
       <div class="title">title 1</div> 
       <div class="image">image 1 for title 1</div> 
      </div> 
     </li> 
     <li> 
      <div class="block"> 
       <div class="title">title 2</div> 
       <div class="image">image 2 for title 2</div> 
      </div> 
     </li> 
     <li> 
      <div class="block"> 
       <div class="title">title 3</div> 
       <div class="image">image 3 for title 3</div> 
      </div> 
     </li> 
     <li> 
      <div class="block"> 
       <div class="title">title 4</div> 
       <div class="image">image 4 for title 4</div> 
      </div> 
     </li> 
    </ul>    
</div>

我需要這個結果，我怎麼得到它？

<div class="wrap"> 
      <ul> 
       <li> 
        <div class="block"> 
         <div class="image">image 1 for title 1</div> 
         <div class="title">title 1</div> 
        </div> 
       </li> 
       <li> 
        <div class="block"> 
         <div class="image">image 2 for title 2</div> 
         <div class="title">title 2</div> 
        </div> 
       </li> 
       <li> 
        <div class="block"> 
         <div class="image">image 3 for title 3</div> 
         <div class="title">title 3</div> 
        </div> 
       </li> 
       <li> 
        <div class="block"> 
         <div class="image">image 4 for title 4</div> 
         <div class="title">title 4</div> 
        </div> 
       </li> 
      </ul> 
     </div>

我試圖使用jQuery .each()但其結果會收到結構這樣

圖像4
圖像3
圖像2
圖像1
標題1
圖像4
圖像3
圖像2
圖像1
標題2
圖像4
圖像3
圖像2
圖像1
標題3
圖像4
圖像3
圖像2
圖像1
標題4

來源

2014-03-03 Siada

顯示你的代碼，請。 – isherwood

歡迎來到StackOverflow。 http://whathaveyoutried.com？請告訴我們你到目前爲止的情況。 SO不是代碼編寫服務，如果您提供了自己的工作證據，您將得到更好的迴應。請參閱[幫助頁面]（http://stackoverflow.com/help）。 – freefaller

通過關閉標題元素開始，讓事情變得更容易？ – adeneo

嘗試.before()

$('.block .title').before(function(){ 
    return $(this).next() 
})

演示：Fiddle

來源

2014-03-03 15:58:43

可以使用insertBefore()

$.each($('.wrap .image'), function() { 
    $(this).insertBefore($(this).prev()); 
});

順便說一句，您的HTML標記無效，您應該使用</div>正確關閉title類，並在演示中爲您解決了它。

Fiddle Demo

來源

2014-03-03 15:56:43 Felix

帶jQuery的多開關標籤

回答

相關問題