[jQuery]inputのname属性を取得したいです。

Question

前提・実現したいこと

inputを生成しているのですが、生成したname属性を取得したいです。
attrを使用したのですが、エラーが出て取得出来ませんでした。

こちらがCodePenの環境になります。
リンク内容

発生している問題・エラーメッセージ

エラーメッセージ
Uncaught TypeError: inputList[i].attr is not a function 

該当のソースコード

<div class="add-area">
	<div class="p-form-item disclosee-address-other">
		<div class="p-form-item__heading">
			<label class="p-form-item__heading-inner" for="DiscloseeAddressOther1">住所</label>
		</div>
		<div class="p-form-item__group">
			<div class="p-input">
				<div class="p-input__group">
					<div class="p-input__relative-wrap">
						<input name="Address1" class="p-input__inner p-input__inner--small" type="text" placeholder="郵便番号" onKeyUp="AjaxZip3.zip2addr(this,'','Address2','Address3');" >
					</div>
					<div class="p-input__relative-wrap">
						<input name="Address2" class="p-input__inner p-input__inner--small" type="text" placeholder="都道府県">
					</div>
				</div>
			</div>
			<div class="p-input">
				<input name="Address3" class="p-input__inner p-input__inner--small" type="text" placeholder="市区町村">
			</div>
			<button class="p-form-item__add p-add" type="button">
				<span class="p-add__icon c-icon c-icon--add"></span>住所をさらに追加する
			</button>
		</div>
	</div>
</div>

$( function() {
            "use strict";
            var $content = $('.disclosee-address-other');
            
            $( '.p-form-item__add' ).on( 'click', function() {
              var inputCount = $('.add-area .disclosee-address-other').length;
              var element = $content.clone( true ).appendTo( '.add-area' );
              // 複製したinputのクリア
              var inputList = element[0].querySelectorAll('input[type="text"]');
              for (var i = 0; i < inputList.length; i++) {
                inputList[i].value = "";
                inputList[i].attr('name');
                console.log(inputList[i]);
              }
                
                $(this).hide();
                $('.p-form-item__add:last').show();
            } );
        } );

試したこと

inputList[i].attr('name');で取得しようとしましたが、エラーが表示されました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

inputListはquerySelectorAllで取得している以上、jQueryオブジェクトではなく生のDOMオブジェクトです。

getAttributeを使いましょう（MDN）。

Comments

[yurika_21]

ありがとうございます！
jQueryオブジェクト、Domオブジェクトの違いに関する知識不足でした！
非常に勉強になりました。

Answer 2

CodePen を示しているのは良いことです。回答がしやすくなります。

attr() は jQuery オブジェクトのメソッドです。DOM の取得には jQuery メソッド $() または $(elem).find() を用いることで jQuery オブジェクトとして要素を取得できます。

変数名の先頭に $ を付けているのは、その変数に格納された要素が jQuery オブジェクトであることを明示するためです。元のコードでは var element には jQuery オブジェクトが代入されていますので、ここは var $element と書くべきです。ただし、この変数名の先頭に $ を付けるのは可読性を上げるためであって、JavaScript の文法には影響しません（変数名の先頭に $ がなくても動作します）。

元のコードは以下のように書き直せます。

$(function() {
  "use strict";
  var $content = $('.disclosee-address-other');

  $('.p-form-item__add').on('click', function() {
    var $element = $content.clone(true).appendTo('.add-area');
    // 複製したinputのクリア
    var $inputList = $element.find('input[type="text"]');
    $inputList.each(function() {
      var $input = $(this);
      $input.val('');
      console.log($input.attr('name'));
    });

    $(this).hide();
  });
});

Comments

[yurika_21]

丁寧なご回答ありがとうございます！
回答に加え、可読性についても触れて頂き大変勉強になりました。
無事解決することが出来ました！