使用jquery/javascript查找当前元素的第一个子元素

find the CURRENT first child of an element with jquery/javascript?

本文关键字：元素 第一个 jquery javascript 查找 使用      更新时间：2023-09-26

我过去从这个网站(阅读:昨天)得到了很好的结果，这里的一个贡献者创建了这个:http://jsbin.com/awerep/1/edit。现在我想让当前选择的选项卡与第一个选项卡交换位置。我很难理解如何使用Jquery和javascript的这个和第一个子选择器。我将通过克隆第一个菜单项来交换菜单项，将其放在已单击的菜单项之前，并用已单击的菜单项替换第一个菜单项。我认为我可以使用jquery的this-child选择器来确定包装器的当前第一个子对象。但是，如果元素的位置动态改变(由于replacewith)，它是否也会动态更新第一个子元素是什么?还是第一个子元素仍然是元素1?

编辑:谢谢大家的帮助。这是我所使用的(作为第一个实际工作的方式，我希望它):http://jsbin.com/olojok/1

如果您想将选定的选项卡移动到第一位置，那么将此代码添加到.click() 

$(this).prependTo($(this).parent());

EDIT:如果你想交换两个标签

var $firstTab = $('.menuitem:first');
var $clickedTab = $(this);
$firstTab.insertAfter($clickedTab);
$clickedTab.prependTo($clickedTab.parent());

(在jQuery中)This将始终是当前选中的元素。如果您希望从您可能已经选择的多个元素中选择第一个元素，只需执行$('.elements')[0]或$('.elements:first-child')或$('.elements:nth-child(1)')

每当您移动现有的元素时，它只是从DOM中分离并重新插入到正确的位置，因此您不需要克隆任何元素。

您可以使用.siblings().first()来查找当前元素的第一个兄弟元素，使用.insertBefore来将该元素移动到当前元素的前面。

您可以使用.prependTo()将当前元素移动到列表中的第一个位置。

function swapWithFirst(el) {
    var $el = $(el);
    $el.siblings().first().insertBefore(el);
    $el.prependTo(el.parentNode);
}

如果父节点中不包含文本节点，则中间行可以替换为:

$el.before(el.parentNode.firstChild);
相关文章：