[英]Check if input is empty, if not, add class to parent div
I have a number of inputs like this: 我有很多这样的输入:
<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>
I get some data from an API and then append to these inputs (so the user can edit). 我从API获取一些数据,然后附加到这些输入(以便用户可以编辑)。
This works fine. 这很好。 The issue is that I want to add a class to this: 问题是我想为此添加一个类:
<div class="fg-line">
This is simple enough if I only have one of these and one input, but since I have multiple, I need some way to check each input and if not empty add the class fg-toggled
such that the line becomes: 如果我只有一个输入和一个输入,这很简单,但是由于我有多个输入,因此我需要某种方法来检查每个输入,如果不为空,则添加类fg-toggled
,使该行变为:
<div class="fg-line fg-toggled">
If I had just one input, I'd do this: 如果我只有一个输入,则可以这样做:
if (('#place_name').value != '' || ('#place_name').value != ('#place_name').defaultValue) {
$('.fg-line').addClass('fg-toggle')
}
But I don't know how to do this without writing this out for every class (there are 30+). 但是我不知道如何在不为每堂课写出来的情况下(有30多个)来做到这一点。 Is there a way to iterate this somehow? 有没有办法以某种方式进行迭代? I tried checking .place-edit
but since it's a class, if any of the inputs with the class are not empty then they all get the new class added. 我尝试检查.place-edit
但是由于它是一个类,因此如果该类的任何输入都不为空,则它们都将添加新的类。
$('.fg-line').has('.placeInformation').filter(function(){
return !$(this).find('.placeInformation').val()
}).addClass('fg-toggled')
Not sure what "default" should be or how it is declared. 不知道应该是什么“默认”或如何声明它。 Could be set in a data attribute and add an ||
可以在data属性中设置并添加||
to above filter condition 达到上述过滤条件
Simply loop through each input and find the parent using .closest(). 只需遍历每个输入并使用.closest()查找父对象。
$('.placeInformation').each(function() {
var $input = $(this);
if ($input.val()) {
var $parent = $input.closest('.fg-line');
$parent.addClass('fg-toggled')
}
});
Use each() and closest() Try this : 使用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>
You could just loop through the .place-edit
class and then check the values and add the class to the parents, like this: 您可以只遍历.place-edit
类,然后检查值并将该类添加到父级,如下所示:
$('.place-edit').each(function(){
if($(this).val() != '' || $(this).val() != $(this).defaultValue) {
$(this).parent().addClass('fg-toggle');
}
})
Try this.. I'm assuming they all have the same class 试试这个..我假设他们都属于同一班
if (('#place_name').value != '' || ('#place_name').value != ('#place_name').defaultValue) {
$('.fg-line').each(function(){
$(this).addClass('fg-toggle')
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.