有没有办法只选择匹配的元素而不是 jQuery 中的子元素？答案

【问题标题】：Is there a way to only select matched elements but not their children in jQuery?有没有办法只选择匹配的元素而不是 jQuery 中的子元素？
【发布时间】：2015-02-18 17:06:36
【问题描述】：

我想选择所有具有 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>

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

【问题讨论】：

您应该在 magic 前面加上数据，然后在 jQuery 中选择以下内容：$("*[data-magic]")，这将选择具有该属性的所有元素。如果要移动元素，请使用$("*[data-magic]).detach().appendTo("wherever you want to append the stuff")
先添加自己的属性无效，应该使用data-*属性。其次，您是否只是想将button 元素移动到顶层div？您是否使用其他一些逻辑来更改 DOM？
如果你选择它们，你能不能只得到所有具有你想要的属性（即魔法）的元素，或者你真的想改变页面上的标记？
我使用属性魔法只是为了说明示例，因为这不是我要说明的重点。这也可以是 x、y、z 或 data-* 或任何其他可选择的东西。
我想更改标记@Beast-a-tron

标签： javascript jquery attributes children

【解决方案1】：

我想不出用选择器来做这件事的方法。您可以遍历每个元素，如果它没有魔法属性，那么只需将其替换为其子元素：

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

因为它使用了一切选择器（*），所以最好提供一个父元素。此外，使用数据属性会更符合语义：

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

【讨论】：