Преместване на един елемент от едно място в друго чрез jQuery - javascript, jquery, html, css-frameworks

Аз използвам Фондация 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="/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>

Трябва да преместите 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");
});

Моля, консултирайте се.

Отговори:

0 за отговор № 1

Опитайте с това:

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

slider.remove();

---

0 за отговор № 2

Преглеждайки съответния бит на orbit.js източник, манипулаторите на събития за задействане на следващите / prev слайдовете са обвързани чрез делегирани събития $slides_container (т.е. елемента за обвивка на плъзгача) и след това филтриране на събития, които бавят до този елемент от следващите / prev html имената на класовете orbit-next / orbit-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");
});
});

Забележете, че не съм тествал това, но гледам източника, както изглежда Трябва работа.

---