使用jQuery將一個元素從一個位置移動到另一個位置

Question

我正在使用Foundation 3來構建站點，並正在使用它附帶的軌道滑塊 。 問題是我的網站設計要求我將滑塊導航移動到與幻燈片允許的位置不同的位置。

我的源代碼是：

<div id="slide-wrapper">
  <div class="orbit-wrapper" style="width: 1384px; height: 560px;"><div class="slider orbit" style="width: 1384px; height: 560px;">
      <img src="http://domain.com/uploads/sliders/psd1400x558.jpg" alt="slide image" data-caption="#captionId1" class="orbit-slide" style="opacity: 1; z-index: 3; display: block;">
      <img src="http://domain.com/uploads/sliders/banner1.jpg" alt="slide image" data-caption="#captionId2" class="orbit-slide" style="opacity: 0; display: block;">
  </div>
  <div class="slider-nav hide-for-small">
      <span class="right">Right</span>
      <span class="left">Left</span>
  </div>
</div><!--slider-->

<div class="blue-wrapper">
    <div class="left-blue"></div>
    <div class="right-blue"></div>
</div>


<span class="orbit-caption" id="captionId1">
   <h3>Title one</h3>
   <p>Text copy text copy text copy </p>
</span>

<span class="orbit-caption" id="captionId2">
   <h3>Title the Second</h3>
   <p>text copy text copy text copy</p>
</span> 

我需要在每個span.orbit標題內移動div.slider-nav，但是我嘗試過的工作沒有按預期進行。

我當前的jQuery是：

// Move home slider navigation from .slider to .orbit-caption
$(document).ready(function() {
     $('div.slider-nav').detach().appendTo('span.orbit-caption');
});

請指教。

Answer 1

試試這個：

var slider = $('div.slider-nav');
$('span.orbit-caption').each(function(){
   $(this).append(slider.clone());
});

slider.remove();

Answer 2

查看orbit.js源代碼的相關位，觸發下一張/上一張幻燈片的事件處理程序使用$slides_container上的委派事件（即，滑塊包裝器元素）綁定，然后過濾由next /冒泡到該元素的事件。上一頁html類名稱（默認為orbit-next / orbit-prev ）。

這意味着，如果將上一個/下一個控件從滑塊包裝中移出，它們將不再起作用，因為單擊事件將不再冒泡到包裝中（因為它們不再是包裝的子級）。

第一遍：hackety-hackety-hack

一個變通的解決方法是在您喜歡的地方插入新的上一個/下一個鏈接，然后綁定新的事件處理程序，以模擬對原始下一個/上一個控件的單擊（然后可以將其隱藏，因為不需要它們）：

// not ideal, don't do this unless the second method listed below doesn't work
$(document).ready(function() {
    var $captions = $('orbit-caption'),
        $orbit = $('#id-of-your-orbit'),
        $sliderNav = $orbit.find('slider-nav'),
        $oldNextBtn = $sliderNav.find('.left'),
        $oldPrevBtn = $sliderNav.find('.right'),
        $newNextBtns = $captions.find('.your-next-class'),
        $newPrevBtns = $captions.find('.your-prev-class');

    $sliderNav.hide();//hide it but leave in DOM so we can trigger clicks on it's contents below

    $newNextBtns.on('click', function(){
        $oldNextBtn.trigger('click');
    });

    $newPrevBtns.on('click', function(){
        $oldPrevBtn.trigger('click');
    });
});

更好的方法：與現有的自定義事件關聯

但是，更巧妙的解決方案是單擊控件時在容器元素上觸發（未記錄的AFAICS） orbit:next-slide或orbit:prev-slide事件：

$(document).ready(function() {
    var $captions = $('orbit-caption'),
        $orbit = $('#slide-wrapper'),
        $nextBtns = $captions.find('.your-next-class'),
        $prevBtns = $captions.find('.your-prev-class');

    $orbit.find('slider-nav').remove();

    $nextBtns.on('click', function(){
        $orbit.trigger('orbit:next-slide');
    });

    $prevBtns.on('click', function(){
        $orbit.trigger('orbit:prev-slide');
    });
});

注意：我還沒有測試過，但是從源頭上看它應該可以工作。