jquery-selectors - jQuery：转换为单个标签

Question

我想将下面的 HTML 转换为单个标签：之前：

<div class="Parent1">
    <div class="Child1">
        <a href="#">Child1</a>
      </div>
      <div class="Child2">
        <a href="#">Child2</a>
      </div>    
    </div>
    <div class="Parent2">
      <div class="Child1">
        <a href="#">Child1</a>
      </div>
      <div class="Child2">
        <a href="#">Child2</a>
      </div>
    </div>

后 ：

<div class="Parent1">
  <button>Child1</button>
  <button>Child2</button>
</div>
<div class="Parent2">
  <button>Child1</button>
  <button>Child2</button>
</div>

我尝试了包装/展开。但它不起作用。这我想是通用的。

Answer 1

试试这个（演示）：

$('div[class^="Parent"]').each(function(index, parent) {
  var html = [];
  $('a', parent).each(function(index, child) {
      html.push('<button>'+$(child).html()+'</button>');
  });
  $(parent).html(html.join(''));
});

它假定父 div 有一个模式，但这不是一些常见的类名。

Answer 2

一种方法：

$("a").unwrap().wrap("<button>").parent().text(function () { 
    return $(this).text();
});

http://jsfiddle.net/Tomalak/Gct7H/

另一个具有相同精神的人：

$("a").unwrap().replaceWith(function () {
    return $("<button>", {text: $(this).text()});
});

---

PS：实际上，您可能希望选择更具体的内容，而不仅仅是$("a"). 也许$("#container a")或$("a.someClass")，取决于您的标记。