Mova um elemento de um ponto para outro usando jQuery - javascript, jquery, html, css-frameworks

Eu estou usando o Foundation 3 para construir um site e estou usando o controle deslizante de órbita isso vem com isto. O problema é que o design do meu site requer que eu mova a navegação do controle deslizante para um local diferente do permitido pelo slide.

Meu código fonte é:

<div id="slide-wrapper">
<div class="orbit-wrapper" style="width: 1384px; height: 560px;"><div class="slider orbit" style="width: 1384px; height: 560px;">
<img src="/images/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="/images/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>

Eu preciso mover o div.slider-nav dentro de cada span.orbit-caption no entanto o que eu tentei não está funcionando como esperado.

Minha jQuery atual é:

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

Por favor informar.

Respostas:

0 para resposta № 1

Tente com isso:

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

slider.remove();

---

0 para resposta № 2

Olhando para o bit relevante do orbit.js fonte, os manipuladores de eventos para acionar os slides next / prev são vinculados usando eventos delegados em $slides_container (ou seja, o elemento wrapper slider) e, em seguida, filtrar eventos borbulhando para este elemento pelos nomes de classes next / prev html ( orbit-next / orbit-prev por padrão).

Isso significa que, se você mover os controles anterior / seguinte para fora do wrapper do slider, eles não funcionarão mais, pois os eventos de clique não serão mais enviados para o wrapper (já que não são mais filhos dele).

Primeira passagem: hackety-hackety-hack

Uma solução alternativa hacky seria inserir novosprev / next links onde quer que você goste, e então ligue novos manipuladores de eventos para simular o clique nos controles next / prev originais (que poderiam então ser escondidos já que eles não são necessários):

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

Uma maneira melhor: vincular-se a eventos personalizados existentes

No entanto, uma solução muito mais simples parece ser apenas acionar o (AFAICS não documentado) orbit:next-slide ou orbit:prev-slide eventos no elemento container quando os controles são clicados, com algo como:

$(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 eu não testei isso, mas olhando para a fonte, parece que devemos trabalhos.

---