這是我的代碼。 https://jsfiddle.net/f6m6k0w8/如何縮短我的jQuery代碼
有沒有更好的方法來縮短下面的代碼而不改變HTML結構?
$(element).parent().prev().children('select[name="custom_type"]').val()
這是我的代碼。 https://jsfiddle.net/f6m6k0w8/如何縮短我的jQuery代碼
有沒有更好的方法來縮短下面的代碼而不改變HTML結構?
$(element).parent().prev().children('select[name="custom_type"]').val()
您可以使用.closest()和.map()清理一些代碼
$(function() {
$('input[type=button]').click(function() {
var attribute = $('input[name="custom_value"]').map(function(index, element) {
var row = {
type: $(element).closest('.grid_wrap').find('select[name="custom_type"]').val(),
value: element.value
};
return row;
}).get();
$('.result').html(JSON.stringify(attribute));
console.log(attribute);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>row 1</p>
<div class="grid_wrap">
<div class="grid_row">
<select name="custom_type">
<option value="A">type A</option>
<option value="B">type B</option>
<option value="C">type C</option>
<option value="D" selected="selected">type D</option>
</select>
</div>
<div class="grid_row">
<input type="text" name="custom_value" value="Derrick Rose" />
</div>
</div>
<p>row 2</p>
<div class="grid_wrap">
<div class="grid_row">
<select name="custom_type">
<option value="A">type A</option>
<option value="B">type B</option>
<option value="C" selected="selected">type C</option>
<option value="D">type D</option>
</select>
</div>
<div class="grid_row">
<input type="text" name="custom_value" value="Camelo Anthony" />
</div>
</div>
<p>row 3</p>
<div class="grid_wrap">
<div class="grid_row">
<select name="custom_type">
<option value="A">type A</option>
<option value="B" selected="selected">type B</option>
<option value="C">type C</option>
<option value="D">type D</option>
</select>
</div>
<div class="grid_row">
<input type="text" name="custom_value" value="Brandon Roy" />
</div>
</div>
<p>
<input type="button" value="show console" />
</p>
<div class="result"></div>
https://jsfiddle.net/arunpjohny/wcbzvwnn/ –
的。如果你不僅要短碼,而且優化了的代碼。
當您使用each()
循環時,可以使用索引獲取相應的元素值。使用此功能可以避免一些函數調用,如parent()
,closest()
內部循環來獲取元素值。
$('select[name="custom_type"]').eq(index).val(),
此外,檢查優化代碼。
$('input[type=button]').click(function() {
var attribute = [];
// Cache the elements
var $customValues = $('select[name="custom_type"]');
$('input[name="custom_value"]').each(function(index, element) {
var row = {
type: $customValues.eq(index).val(), // Get value of corresponding element from cache
value: element.value
};
attribute.push(row);
});
$('.result').html(JSON.stringify(attribute));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p>row 1</p>
<div class="grid_wrap">
<div class="grid_row">
<select name="custom_type">
<option value="A">type A</option>
<option value="B">type B</option>
<option value="C">type C</option>
<option value="D" selected="selected">type D</option>
</select>
</div>
<div class="grid_row">
<input type="text" name="custom_value" value="Derrick Rose" />
</div>
</div>
<p>row 2</p>
<div class="grid_wrap">
<div class="grid_row">
<select name="custom_type">
<option value="A">type A</option>
<option value="B">type B</option>
<option value="C" selected="selected">type C</option>
<option value="D">type D</option>
</select>
</div>
<div class="grid_row">
<input type="text" name="custom_value" value="Camelo Anthony" />
</div>
</div>
<p>row 3</p>
<div class="grid_wrap">
<div class="grid_row">
<select name="custom_type">
<option value="A">type A</option>
<option value="B" selected="selected">type B</option>
<option value="C">type C</option>
<option value="D">type D</option>
</select>
</div>
<div class="grid_row">
<input type="text" name="custom_value" value="Brandon Roy" />
</div>
</div>
<p>
<input type="button" value="show console" />
</p>
<div class="result"></div>
原諒我的錯誤的答案。不知何故,'$ .each'中的'parents()'總是緊貼在第一個'select'標籤上。不知道爲什麼。感覺不好。 –