Javascript 使用jQuery将一个元素从一个位置移动到另一个位置 我正在使用基础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> 

请告知。

尝试以下方法：

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

slider.remove();

---

查看的相关位，用于触发下一张/上一张幻灯片的事件处理程序使用

$slides\u container

（即slider wrapper元素）上的委派事件绑定，然后根据下一张/上一张html类名过滤冒泡到此元素的事件（默认情况下，

orbit next

/

orbit prev

）

这意味着，如果将上一个/下一个控件移出滑块包装器，它们将不再工作，因为单击事件将不再冒泡到包装器（因为它们不再是它的子对象）

第一关：哈克蒂·哈克蒂·哈克 黑客的解决方法是在任何地方插入新的上一个/下一个链接，然后绑定新的事件处理程序来模拟单击原始的下一个/上一个控件（由于不需要这些控件，因此可以将其隐藏）：

更好的方法：绑定到现有的自定义事件 但是，一个更简洁的解决方案似乎是在单击控件时仅触发容器元素上的（未记录的AFAIC）

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

---

注意：我还没有测试过，但从源代码看，它似乎应该可以工作。

“我尝试过的并没有达到预期效果”。你期待什么？我在JSFIDLE中尝试了您的代码，它工作得很好（至少在每个span.orbit标题中添加了div.slider-nav）

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

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