如何在 Jquery 中选择 $(this) 的父元素的兄弟姐妹

Question

这是我的 HTML。我有一个选择字段，根据我选择的选项，我将使用我使用 Ajax 获取的相应价格更新价格字段。

而且我还需要在 + 按钮单击时输入多行。

复制工作正常。但是我在更新价格时有一些疑问。每个 col 都有相同的 id，所以我如何在选项选择时只更新它自己的价格。

$(document).on('click', '.newrow-plus', function(e) {
    var $tr    = $(this).closest('.order-wastetypeRow');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row order-wastetypeRow">
    <div class="col-12 col-md-6">
        <div class="form-group">
            <label>Waste type</label>
            <select class="form-control" id="order-edit-wastetype">
                <option value="0" selected>Select one</option>
                    <option value="1">Gemischtes steiniges Material</option>
                    <option value="2">Sperrgut gemischt</option>
                    <option value="3">Gemischte Abfälle Brennbares Material</option>
                    <option value="4">Sortenreine Grünabfälle</option>
                    <option value="6">Sortenreiner Holzabfall unbelastet</option>
                </select>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="form-group">
            <label>Price</label>
            
            <input type="text" class="form-control" id="order-edit-wasteprice" value="">
        </div>
    </div>
    <div class="col-12 col-md-2">
        <div class="form-group">
            <div class="number">
                <button class="newrow-minus">-</button>
                <button class="newrow-plus">+</button>
            </div>
        </div>
    </div>
</div>

这是更新价格的Ajax部分

$(document).on('change', '#order-edit-wastetype', function(e) {
    $wastetype_id = this.value;
    var url = window.location.href;
    var id = url.substring(url.lastIndexOf('/') + 1);
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type: 'POST',
        url: BASE_URL + '/backend/dealer/get-wastetype-price',
        data: { 'id': $wastetype_id },
        dataType: 'json', 
        success: function(response) {
            $('#order-edit-wasteprice').val(response);
        }
  });
}); 

Answer 1

id在DOM中必须是唯一的，所以最好在添加新行的时候更新id，一个简单的解决办法是使用.order-wastetypeRow的长度，像这样：

$(document).on('click', '.newrow-plus', function(e) {
  var rowLength = $('.order-wastetypeRow').length;
  var $tr       = $(this).closest('.order-wastetypeRow');
  var $clone    = $tr.clone();
  $clone.find(':text').val('').attr('id', `order-edit-wasteprice${rowLength}`);
  $clone.find('#order-edit-wastetype').attr('id', `order-edit-wastetype${rowLength}`)
  $tr.after($clone);
});

无论如何，在您的更改处理程序中，您可以通过${this} 访问当前选择，因此您可以找到相应的输入，如以下示例：

$(document).on('click', '.newrow-plus', function(e) {
  var rowLength = $('.order-wastetypeRow').length;
  var $tr = $(this).closest('.order-wastetypeRow');
  var $clone = $tr.clone();
  $clone.find(':text').val('').attr('id', `order-edit-wasteprice${rowLength}`);
  $clone.find('#order-edit-wastetype').attr('id', `order-edit-wastetype${rowLength}`)
  $tr.after($clone);
});

$(document).on('change', '[id*=order-edit-wastetype]', function(e) {
  var target = $(this);
  var inp = target.closest('.order-wastetypeRow').find(':text');
  /* do ajax or whatever */
  inp.val(100); /*or the value recieved by ajax */
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row order-wastetypeRow">
  <div class="col-12 col-md-6">
    <div class="form-group">
      <label>Waste type</label>
      <select class="form-control" id="order-edit-wastetype">
        <option value="0" selected>Select one</option>
        <option value="1">Gemischtes steiniges Material</option>
        <option value="2">Sperrgut gemischt</option>
        <option value="3">Gemischte Abfälle Brennbares Material</option>
        <option value="4">Sortenreine Grünabfälle</option>
        <option value="6">Sortenreiner Holzabfall unbelastet</option>
      </select>
    </div>
  </div>
  <div class="col-12 col-md-4">
    <div class="form-group">
      <label>Price</label>

      <input type="text" class="form-control" id="order-edit-wasteprice" value="">
    </div>
  </div>
  <div class="col-12 col-md-2">
    <div class="form-group">
      <div class="number">
        <button class="newrow-minus">-</button>
        <button class="newrow-plus">+</button>
      </div>
    </div>
  </div>
</div>