How to shorten my jQuery code

Question

Here is my code. https://jsfiddle.net/f6m6k0w8/

Is there a better way to shorten the code below without changing the HTML structure?

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

Answer 1

If you not only want short code, but also optimized code.

As you're looping using each(), you can use the index to get the corresponding element value. Using this you can avoid some function calls like parent(), closest() inside loop to get the element value.

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

Demo

Also, check the optimized code.

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

You can do this:

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

DEMO

.closest finds closest element mentioned by traversing up through its ancestors in the DOM tree. So basically find its closest base parent and then use find to get element

Answer 3

You can use .closest() and .map() clean up some of the code

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