Question

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

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

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

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

1 个答案: