在下面的示例中，我想使用insertBefore旋转元素，我的意思是每次单击最后一个对象时都应该先使用insertBefore移动到第一个对象。使用相同对象旋转元素

下面是简单的例子，

$elems = $('.parent').find('div'); 
 

 
$('body').click(function() { 
 
    $elems = $elems; 
 
    $elems.eq(4).insertBefore($elems.eq(0)) 
 
    console.log('clicked'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
</div>

正如你可以在点击后第一时间看到，每一次相同的元素被引用之前插入。是否有可能使用相同对象的引用dom？因为这是一个复杂问题的简单例子，如果我每次都可以使用变量而不是每次使用jQuery选择器，它会有很大的帮助。

来源

2017-09-15 Zorro Here

请问您可以编辑您的问题，使其更清楚您想要做什么，以及问题是什么。目前还不清楚。 –

你想说什么？ – 2017-09-15 10:07:58

你想把'$ elems = $（'。parent'）。find（'div'）'放到你的点击处理程序中，这样你总能得到DOM的_current_状态。否则，你将只是在处理一个“缓存”选择，它不能反映元素的实际DOM顺序。 – CBroe

我不知道为什么你需要该对象在点击功能之外。

所以这里是一个解决方案：

$('body').click(function() { 
 
    $('.parent div:last').prependTo($('.parent')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
</div>

替代与对象的功能外

为了使这项工作，我做的.parent对象不.parent div：

var par = $('.parent'); 
 
$('body').click(function() { 
 
    par.find('div:last').prependTo(par); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
</div>

来源

2017-09-15 10:19:08 LinkinTED

如果你想避免DOM内其他选择，比你应该更新脚本中的jQuery选择器（阵列）这种方式（或类似）：

$elems = $('.parent div'); 
 
function insertElement(selection, indexFrom, indexTo) { 
 
    selection.eq(indexFrom).insertBefore(selection.eq(indexTo)); 
 
    selection.splice(indexTo, 0, selection.splice(indexFrom, 1)[0]); 
 
}; 
 
$('body').click(function() { 
 
    insertElement($elems, $elems.length-1, 0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parent"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
</div>

也在JSFiddle。

用于移动JS阵列内的元素更多信息，请致电Move an array element from one array position to another。

来源

2017-09-15 10:37:59 skobaljic

使用相同对象旋转元素

回答

替代与对象的功能外

相关问题