如何缩短我的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基本父级，然后使用find来获取element

Answer 2

如果您不仅需要短代码，还需要优化代码。

当您使用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>

Answer 3

您可以使用.closest()和.map()清理部分代码

＆＃13;

＆＃13;

$(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);
  });

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;