jQuery：如何訪問元素的名稱

Question

請參閱以下HTML代碼

<input id="product_code1" name="Samsung"><br>
<input id="product_code2" name="Apple"><br>
<input id="product_code3" name="Huawei"><br>
<input id="product_code4" name="Motorola"><br>

和jQuery代碼

$( "input[id*='product']" ).val( 'test' );

結果將默認顯示4個帶有'test'值的文本框，但是現在我喜歡顯示4個帶有產品名稱值的文本框，這意味着第一個文本框將顯示'Samsung'，第二個文本框將顯示'Apple'等上，那么我應該在jquery代碼中輸入什么命令？ 請建議。

Answer 1

只需使用.val(fn) ：

 $("input[id^='product_']").val(function() { return this.name; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="product_code1" name="Samsung"><br> <input id="product_code2" name="Apple"><br> <input id="product_code3" name="Huawei"><br> <input id="product_code4" name="Motorola"><br> 

對於每個輸入元素，它將調用該函數，該函數將返回要設置的值。

獎金

為了更加簡潔，您可以考慮一個輔助函數，例如：

jQuery.prop = function(name) {
    return function() {
        return this[name];
    }
};

然后，代碼變為：

$("input[id^='product_']").val($.prop('name'));

Answer 2

嘗試這個：

 $("input[id*='product']").each(function() { $this = $(this); $this.val($this.attr("name")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="product_code1" name="Samsung"><br> <input id="product_code2" name="Apple"><br> <input id="product_code3" name="Huawei"><br> <input id="product_code4" name="Motorola"><br> 

Answer 3

$("input[id*='product']").each(function () {
    var $this = $(this);
    $this.val($this.prop("name"));
});

JSFiddle