使用jQuery将一个元素从一个位置移动到另一个位置

Question

I'm using Foundation 3 to build a site and am using the orbit slider that comes with it. The problem is that my site design requires me to move the slider navigation into a different location than is allowed by the slide.

My source code is:

<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> 

I need to move the div.slider-nav inside each of the span.orbit-caption however what I've tried is not working as expected.

My current jQuery is:

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

Please advise.

Answer 1

Try with this:

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

slider.remove();

Answer 2

Looking at the relevant bit of the orbit.js source , the event handlers for triggering the next/prev slides are bound using delegated events on $slides_container (ie the slider wrapper element) and then filter events bubbling up to this element by the next/prev html class names ( orbit-next / orbit-prev by default).

This means that if you move the prev/next controls out of the slider wrapper they will no longer work, as click events will no longer bubble up to the wrapper (as they are no longer children of it).

First pass: hackety-hackety-hack

A hacky workaround would be to insert new prev/next links wherever you like, and then bind new event handlers to simulate the click on the original next/prev controls (which could then be hidden as they aren't needed):

// 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');
    });
});

A better way: tie into existing custom events

However, a much neater solution looks to be to just trigger the (undocumented AFAICS) orbit:next-slide or orbit:prev-slide events on the container element when the controls are clicked, with something like:

$(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');
    });
});

NB I haven't tested that, but looking at the source it looks like it should work.