html内の値取得について

Question

$('input[type="button"]')
で <input type=“button”>
に該当するものが取得できると思いますが、
$('input[type="button"]').prop('outerHTML')
で該当するhtmlを取得しようとした場合、最初の1件しか表示されません。

該当する全てを取得する方法はありますか？

Answer 1

eachで走査すればいいでしょう

$(function(){
  $('input[type="button"]').each(function(){
    console.log($(this).prop('outerHTML'));
  });
});

追記

配列でうけたければこう

$(function(){
  var a=$.map($('input[type="button"]'),function(i){
    return i.outerHTML;
  });
  console.log(a);
});

Comments

[ozaking]

ありがとうございます！
助かりました。

Answer 2

prop等の「要素から値を取得する」類のメソッドは、「マッチしている要素の先頭」のものしか返さないようになっています。
eachを使って全てのマッチしている要素を網羅した処理を書いてみましょう。

var listOuterHtml = [];
$('input[type="button"]').each((index, element) => {
  // input[type="button"]な要素1個ずつに対してこの処理が呼ばれる
  var outerHtml = $(element).prop('outerHTML');
  listOuterHtml.push(outerHtml);
});

console.log(listOuterHtml);

Comments

[ozaking]

ありがとうござます！