Как сократить код 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() 

DEMO

.closest находит ближайший элемент, упомянутый обходе через своих предков в дереве DOM. Таким образом, в основном найти свою closest базу родителей, а затем использовать поиск, чтобы получить element

Answer 2

Вы можете использовать .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>

Answer 3

Если вы хотите не только короткий код , но также оптимизирован код.

Как вы зацикливаете с помощью each(), вы можете использовать индекс, чтобы получить соответствующее значение элемента. Используя это, вы можете избежать некоторых вызовов функций, таких как parent(), closest() внутри цикла, чтобы получить значение элемента.

$('select[name="custom_type"]').eq(index).val(), 

Demo

Кроме того, проверьте оптимизированный код.

$('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>