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

【问题标题】：Check if input is empty, if not, add class to parent div检查输入是否为空，如果不是，则将类添加到父div
【发布时间】：2018-01-08 13:29:29
【问题描述】：

我有很多这样的输入：

<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，但由于它是一个类，如果该类的任何输入不为空，那么它们都会添加新类。

【问题讨论】：

是的，您可以通过选择class 进行迭代。看到这个寻求帮助stackoverflow.com/questions/4735342/…
@tech2017 是的，但我在测试什么？难道我还不需要先检查每个 id（place_name 等）吗？这是棘手的部分（无论如何对我来说。）

标签： javascript jquery html

【解决方案1】：

只需遍历每个输入并使用 .closest() 找到父级。

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

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

});

Sample plunkr

【讨论】：

【解决方案2】：

可以使用filter()

$('.fg-line').has('.placeInformation').filter(function(){
   return !$(this).find('.placeInformation').val()
}).addClass('fg-toggled')

不确定 "default" 应该是什么或如何声明它。可以在数据属性中设置并在上述过滤条件中添加||

【讨论】：

【解决方案3】：

使用 each() 和最接近的() 试试这个：

$(".fg-input").each(function() {

  if ($(this).val() != '') {
    $(this).closest(".fg-line").addClass('fg-toggle');
  }
})

.fg-toggle
{
color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

这会将fg-toggle 类添加到每个fg-line 中，就好像if 语句总是计算为true，但我的输入是空的。

【解决方案4】：

试试这个.. 我假设他们都有相同的类

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

【讨论】：

这个问题是我不想写 35 次，因为我有所有不同的 id (#place_name)
如果你不想重复35次，可以得到类似的输入： $('.fg-line').each(function(){ if($(this).find('input' ).val() !== '') $(this).addClass('fg-toggle') });或类似的
您需要获取父类并获取父类的输入并应用条件如果为真继续添加类似于我写的类

【解决方案5】：

您可以循环遍历 .place-edit 类，然后检查值并将该类添加到父类，如下所示：

$('.place-edit').each(function(){
    if($(this).val() != '' || $(this).val() != $(this).defaultValue) {
    $(this).parent().addClass('fg-toggle');
  }
})

【讨论】：