如何縮短我的jQuery代碼

Question

這是我的代碼。 https://jsfiddle.net/f6m6k0w8/

有沒有更好的方法可以縮短下面的代碼而不更改HTML結構？

$(element).parent().prev().children('select[name="custom_type"]').val()

Answer 1

你可以這樣做：

$(element).closest('.grid_wrap').find('[name="custom_type"]').val()

演示

.closest通過遍歷其在DOM樹中的祖先來查找提到的最接近的元素。 所以基本上找到它的closest基本父代，然后使用find來獲取element

Answer 2

如果您不僅要短代碼，而且要優化代碼。

在使用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> 

Answer 3

您可以使用.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>