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

我有很多这样的输入：

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

---

简单地遍历每个输入并使用.closest（）查找父级。

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

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

});

示例plunkr

---

可以使用filter()

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

不知道应该是什么样的“默认”或如何声明。 可以在数据属性中设置并添加|| 以上过滤条件

---

使用each（）和nearest（）试试这个：

$(".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>

链接地址: http://www.djcxy.com/p/83521.html

上一篇: Check if input is empty, if not, add class to parent div

下一篇: Multiple Knockout viewmodels with Asp.Net Core ViewComponents