Javascript 有没有办法在jQuery中只选择匹配的元素而不选择它们的子元素？

我想选择属性为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>

写
删除
新的

我想得到的是：

<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属性，则只需将其替换为其子元素：

$('*').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('*') );
    }
});

---

您应该在

magic

前面加上数据前缀，然后在jQuery中选择以下内容：

$（“*[data magic]”）

，这将选择具有该属性的所有元素。如果要移动元素，请使用

$（“*[data magic]）.detach（）.appendTo（“无论您想在哪里添加内容”）

首先，添加您自己的属性是无效的，您应该使用

数据-*

属性。其次，您是否仅尝试将

按钮

元素移动到顶层

div

？是否有其他逻辑用于更改DOM？如果选择它们，您是否可以获得所有具有属性的元素您想要（即magic）还是确实想要更改页面上的标记？我使用属性magic只是为了说明示例，因为它不是我要说明的要点。也可以是x、y、z或数据-*或任何其他可选内容。我想更改标记@Beast-a-tron