有没有一种方法可以在jQuery中只选择匹配的元素而不选择它们的子元素

Is there a way to only select matched elements but not their children in jQuery?

本文关键字：元素 选择 一种 方法 jQuery 有没有      更新时间：2024-01-15

我想选择所有具有属性magic的元素。但我不喜欢任何没有名为magic的属性的孩子。

所选元素不应根据属性为magic的父元素更改其顺序。

例如，

我有这样一个HTML：

<div magic="row">
    <div magic="inputWrapper">
        <input magic="input"></input>
        <input magic="input"></input>
    </div>
    <div>
        <div class="row">
            <div>
                <button magic="write">Write</button>
            </div>
            <div>
                <button magic="delete">Delete</button>
            </div>
            <div>
                <button magic="new">New</button>
            </div>
        </div>
    </div>
</div>

我想要获得的是：

<div magic="row">
    <div magic="inputWrapper">
        <input magic="input"></input>
        <input magic="input"></input>
    </div>
    <button magic="write">Write</button>
    <button magic="delete">Delete</button>
    <button magic="new">New</button>
</div>

这是一项只使用选择器的简单任务，还是应该使用循环等？

我想不出用选择器做这件事的方法。你可以循环遍历每个元素，如果它没有魔法属性，那么就用它的子元素替换它：

$('*').each(function(){
    var $this = $(this);
    if( typeof $this.attr('magic') === 'undefined' ){
        $this.replaceWith( $this.find('*') );
    }
});

由于它使用了everything选择器（*），因此最好提供一个父元素。此外，使用数据属性将更具语义：

$('#parent').find('*').each(function(){
    var $this = $(this);
    if( !$this.data('magic') ){
        $this.replaceWith( $this.find('*') );
    }
});
相关文章：