如何 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('');