javascript - 检查输入是否为空，如果不为空，则将类添加到父div

Question

我有很多这样的输入:

<div class="fg-line">
    <input type="text" class="form-control fg-input place-edit placeInformation" id="place_name">
    <label class="fg-label">Place Name</label>
</div>
<div class="fg-line">
    <input type="text" class="form-control fg-input place-edit placeInformation" id="place_address">
    <label class="fg-label">Place Address</label>
</div>

我从 API 获取一些数据，然后附加到这些输入(以便用户可以编辑)。

这很好用。问题是我想为此添加一个类:

<div class="fg-line">

如果我只有其中一个和一个输入，这很简单，但由于我有多个，我需要某种方法来检查每个输入，如果不为空，则添加类 fg-toggled 这样该行变为:

<div class="fg-line fg-toggled">

如果我只有一个输入，我会这样做:

if (('#place_name').value != '' || ('#place_name').value != ('#place_name').defaultValue) {
  $('.fg-line').addClass('fg-toggle')
}

但是如果不为每个类(有 30 多个)都写出来，我不知道如何做到这一点。有没有办法以某种方式迭代这个？我尝试检查 .place-edit 但由于它是一个类，如果该类的任何输入不为空，那么它们都会添加新类。

Answer 1

简单地循环每个输入并使用 .closest() 找到父级。

$('.placeInformation').each(function() {
    var $input = $(this);

    if ($input.val()) {
        var $parent = $input.closest('.fg-line');
        $parent.addClass('fg-toggled')
    }

});

Sample plunkr