Есть ли способ выбрать только согласованные элементы, но не их дети в jQuery?

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