jquery-selectors - jQuery：単一のタグに変換する

Question

以下のHTMLを単一のタグに変換したい：Before：

<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

それを行う1つの方法：

$("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")

Answer 2

これを試してください（デモ）：

$('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にパターンがあることを前提としていますが、それは一般的なクラス名ではありません。