javascript - 如何根据数据属性和数组输入名称查找元素

Question

我有以下 html 标记:

//this is in ajax success result
success: function(response) {
  if(response.success) {
    $("[data-input='" + response.field + "']").parents('.file-wrapper').find("[data-item='" + response.item + "']").remove();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
                                <label class="col-md-2 director-label-file" for="director_front_passport">Front ID/Passport</label>
                                <div class="col-md-8 file-wrapper">
                                    <input type="file" name="director_front_passport[]" class="app-file valid" data-item="1" aria-required="true" aria-invalid="false">
                                    <label class="file-upload" for="director_front_passport"><span>Upload a File</span></label>
                                    <div data-input="director_front_passport" class="file-name"><span class="image_wrapper"><span data-num="0" class="image_name">Link to image.jpeg</span><span title="Remove" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-remove remove-file"></span></span></div><label id="director_front_passport[]-error" class="error" for="director_front_passport[]"></label>
                                </div

在 ajax 响应中我有:

{"success":true,"errors":false,"field":"director_front_passport","num":"0","item":"1"}

我想找到 name=director_front_passport 的元素(或者 data-input = director_front_passport - 是一样的)，然后找到 data-item = response.item 的元素，在这种情况下= 1.

如何找到它？我这样试过。

Answer 1

您可以使用 .closest( selector ) 而不是使用 parents .

虽然parents获取当前匹配元素集合中每个元素的祖先，可选地由选择器过滤；

closest 通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

如果 ajax 的返回值是字符串，您可以使用 JSON.parse 将其转换

我的例子:

$(function () {
  var response = '{"success":true,"errors":false,"field":"director_front_passport","num":"0","item":"1"}';

  $("[data-input='" + response.field + "']").closest('.file-wrapper').find("[data-item='" + response.item + "']").remove();

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-group">
    <label class="col-md-2 director-label-file" for="director_front_passport">Front ID/Passport</label>

    <div class="col-md-8 file-wrapper">
        <input type="file" name="director_front_passport[]" class="app-file valid" data-item="1" aria-required="true"
               aria-invalid="false">
        <label class="file-upload" for="director_front_passport"><span>Upload a File</span></label>

        <div data-input="director_front_passport" class="file-name"><span class="image_wrapper"><span data-num="0"
                                                                                                      class="image_name">Link to image.jpeg</span><span
                title="Remove" data-placement="top" data-toggle="tooltip"
                class="glyphicon glyphicon-remove remove-file"></span></span></div>
        <label id="director_front_passport[]-error" class="error" for="director_front_passport[]"></label>
    </div>
</div>