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

【问题标题】：Move one element from one spot to another using jQuery使用 jQuery 将一个元素从一个位置移动到另一个位置
【发布时间】：2013-06-28 17:04:02
【问题描述】：

我正在使用 Foundation 3 构建一个站点，并使用它附带的 orbit slider。问题是我的网站设计要求我将滑块导航移动到与幻灯片允许的位置不同的位置。

我的源代码是：

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

我需要将 div.slider-nav 移动到每个 span.orbit-caption 中，但是我尝试过的没有按预期工作。

我目前的 jQuery 是：

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

请指教。

【问题讨论】：

“我尝试过的没有按预期工作”。你期待什么？我在 jsfiddle 中尝试了您的代码，它工作正常（至少它在每个 span.orbit-caption 中附加了 div.slider-nav）

标签： javascript jquery html css-frameworks

【解决方案1】：

试试这个：

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

slider.remove();

【讨论】：

【解决方案2】：

查看orbit.js source 的相关位，用于触发下一张/上一张幻灯片的事件处理程序使用$slides_container（即滑块包装元素）上的委托事件绑定，然后过滤冒泡到该元素的事件下一个/上一个 html 类名（默认为 orbit-next / orbit-prev）。

这意味着，如果您将 prev/next 控件移出滑块包装器，它们将不再起作用，因为点击事件将不再冒泡到包装器（因为它们不再是它的子级）。

第一关：hacky-hackety-hack

一个 hacky 的解决方法是在任何你喜欢的地方插入新的 prev/next 链接，然后绑定新的事件处理程序来模拟对原始 next/prev 控件的点击（然后可以隐藏，因为它们不需要）：

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

注意我还没有测试过，但是看看源代码，它看起来应该工作。

【讨论】：