如何在Jquery中選擇$(this)的父元素的兄弟

這是我的 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/[email protected]/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);
        }
  });
}); 

uj5u.com熱心網友回復：

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

無論如何，在您的更改處理程式中，您可以訪問當前 select by ${this}，因此您可以找到相應的輸入，例如 belwo 示例：

$(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/[email protected]/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>

標籤：javascript html 查询 阿贾克斯

上一篇：如何降級節點版本？

下一篇：如果包含jQuery檔案，為什么PHPPDObindParam回傳null