如何 select div 不是 jQuery 中 div 的父級或兄弟級

Question

我有很多這樣的div

        <div class="body-row row m-0">
            <div class="px-2 col-3">
                <select name="item_type[]" class="form-control invoiceType" required>
                    <option value="newitem">New Item</option>
                    <option value="presetitem">Present Item</option>
                    <option value="discount">Discount</option>
                    <option value="subsidy">Subsidy</option>
                </select>
            </div>
            <div class="px-2 col-6 item-description" style="display: flex;">
                <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">
            </div>
            <div class="px-2 col-2">
                <input type="number" class="form-control" name="amount[]" placeholder="0" required>
            </div>
            <div class="col-1 del-icon-container"><i class="fas fa-trash del-invoice-item"></i></div>
        </div>

我想 select 只有item-description ，並刪除其中的內容

$(document).on('change', '.invoiceType',function() {
        var invoiceType = $(this).find(":selected").val();
        if(invoiceType == 'newitem') {
            $('.item-description').empty();
            $('.item-description').append(`
                <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">
            `);
        } 
    });

目前它對所有 div 進行更改，因為它們具有所有相同的類名稱

Answer 1

您可以使用 jQuery 的 DOM 遍歷方法基於對事件處理程序中元素的引用將元素相互關聯。 在這種情況下，您可以使用closest()來查找公共父容器，然后使用find()來獲取您需要的元素。

請注意，在下面的示例中， :selected選擇器不是必需的 - 您可以直接從select獲取val() 。 此外，您可以通過設置元素的html()來組合empty()和append() 。

 $(document).on('change', '.invoiceType', function() { console.log('change'); let $field = $(this); let invoiceType = $field.val(); //:selected not needed if (invoiceType === 'newitem') { $field.closest('.body-row').find('.item-description').html(`<input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">`); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="body-row row m-0"> <div class="px-2 col-3"> <select name="item_type[]" class="form-control invoiceType" required> <option value="newitem">New Item</option> <option value="presetitem">Present Item</option> <option value="discount">Discount</option> <option value="subsidy">Subsidy</option> </select> </div> <div class="px-2 col-6 item-description" style="display: flex;"> <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1"> </div> <div class="px-2 col-2"> <input type="number" class="form-control" name="amount[]" placeholder="0" required> </div> <div class="col-1 del-icon-container"><i class="fas fa-trash del-invoice-item"></i></div> </div> <div class="body-row row m-0"> <div class="px-2 col-3"> <select name="item_type[]" class="form-control invoiceType" required> <option value="newitem">New Item</option> <option value="presetitem">Present Item</option> <option value="discount">Discount</option> <option value="subsidy">Subsidy</option> </select> </div> <div class="px-2 col-6 item-description" style="display: flex;"> <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1"> </div> <div class="px-2 col-2"> <input type="number" class="form-control" name="amount[]" placeholder="0" required> </div> <div class="col-1 del-icon-container"><i class="fas fa-trash del-invoice-item"></i></div> </div>

最后，順便說一句，請注意創建一個全新的input並覆蓋包含它的 div 的內容有點多余。 只需在輸入上調用val('')就足夠了，您需要做的就是清除它的值：

$field.closest('.body-row').find('.item-description input').val('');