带有 Li 的 jquery 输入选择器
jquery input selector with li
>我有带有class="txtdate"的输入文本框列表
和
类 ="txthrs" 的另一个输入文本框的列表
喜欢
<div id="dvlitr"><li id="0"><label class="txtdatewrapper"><input type="text" placeholder="Select Date" class="txtdate hasDatepicker" value="" readonly="" id="txtsDate1"><span class="txtdateicon"></span> </label><input type="text" placeholder="Hrs" class="txthours" value="" id="txtsHrs1"><a title="Add" class="btnadd" href="javascript:void(0)"></a><a title="Delete" id="btndelnewli1" class="btndelete" href="javascript:void(0)"></a><input type="hidden" placeholder="Hrs" value="0" id="iDhdn0"></li><li id="2"><label class="txtdatewrapper"><input type="text" placeholder="Select Date" class="txtdate hasDatepicker" readonly="" id="txtsDate2" value="10/28/2013"><span class="txtdateicon"></span></label> <input type="text" placeholder="Hrs" class="txthours" id="txtsHrs2"><a title="Add" class="btnadd" href="javascript:void(0)"></a><a title="Delete" id="btndelnewli2" class="btndelete" href="javascript:void(0)"></a><input type="hidden" placeholder="Hrs" value="0" id="iDhdn2"></li><li id="3"><label class="txtdatewrapper"><input type="text" placeholder="Select Date" class="txtdate hasDatepicker" readonly="" id="txtsDate3" value="10/30/2013"><span class="txtdateicon"></span></label> <input type="text" placeholder="Hrs" class="txthours" id="txtsHrs3"><a title="Add" class="btnadd" href="javascript:void(0)"></a><a title="Delete" id="btndelnewli3" class="btndelete" href="javascript:void(0)"></a><input type="hidden" placeholder="Hrs" value="0" id="iDhdn3"></li></div>
我必须找到是否有任何带有空日期或空小时数的 li(其中任何一个)
我尝试过这样的事情
var count = $('#dvlitr > li').filter(function() {
var $txtdate = $(this).children('.txtdate').val();
var $txthrs = $(this).children('.txthrs').val();
return (($.trim($txtdate) != '' && $.trim($txthrs) === '') || ($.trim($txtdate) === '' && $.trim($txthrs) != ''))
}).length;
alert(count);
小提琴
但没有得到想要的结果
请帮忙
谢谢
查看正确的 HTML 标记后,您可以执行以下操作:
var count = $('li').filter(function () {
var $txtdate = $(this).children('.txtdate').val();
var $txthrs = $(this).children('.txthrs').val();
return ($.trim($txtdate) === '' && $.trim($txthrs) === '')
}).length;
console.log('count: ' + count);
演示:小提琴
更新
您可以这样做:
var count = $('li').filter(function () {
var $txtdate = $(this).find('.txtdate').val();
var $txthrs = $(this).find('.txthrs').val();
return ($.trim($txtdate) === '' && $.trim($txthrs) === '')
}).length;
删除"
:
" 前面的 "input
"...会更好,但没有做这个把戏!
有关更多信息,请参阅 Jquery 选择器文档
你犯了一些错误。我认为这个现在应该是正确的:
var count = $("li > input.txtdate[value='']+
input.txthrs[value='']").length;
您只想检索txtdate
和txthrs
都为空的li
数?
您可以在此更新的帕拉什小提琴中看到它的实际效果
要完成,如果空value
实际上丢失了value
属性,请使用以下命令:
var count = $("li > input.txtdate:not([value])+
input.txthrs:not([value])").length;
<块引用类>要确保具有值属性:$('input[type=text']:not([value])).attr('value','');
要检索几乎一个字段为空的行数,请使用以下命令:
var count = $.unique($("li").has("input.txtdate[value=],input.txtdate:not([value]),input.txthrs[value=],input.txthrs:not([value])")).length;
更新
$('input:not([value])').attr('value', '');
//Getting only lines when one of input is empty
$.unique($("li").has("input.txtdate[value=''],input.txthrs[value='']")).length;
//Getting only lines when both inputs are empty
$("li > input.txtdate[value='']+input.txthrs[value='']").length;
相信我,还是不相信...
使用新的 DOM 输入进行更新不是 li 的直接子级
$('input:not([value])').attr('value', '');
//Getting only lines when one of input is empty
$.unique($("li").has("input.txtdate[value=''],input.txthrs[value='']")).length;
//Getting only lines when both inputs are empty
$("li input.txtdate[value='']+input.txthrs[value='']").length;
我醒了...不好意思!所以你从一开始就是对的,使用简单的选择器,你无法检测到输入的用户更新!对不起,我错了!我在这里建立了这个插件:
jQuery.extend(
jQuery.expr[':'],
{
/// check that a field's value property has a particular value
'field-value': function (el, indx, args) {
var a, v = $(el).val();
if ( (a = args[3]) ) {
switch ( a.charAt(0) ) {
/// begins with
case '^':
return v.substring(0,a.length-1) == a.substring(1,a.length);
break;
/// ends with
case '$':
return v.substr(v.length-a.length-1,v.length) ==
a.substring(1,a.length);
break;
/// contains
case '*': return v.indexOf(a.substring(1,a.length)) != -1; break;
/// equals
case '=': return v == a.substring(1,a.length); break;
/// not equals
case '!': return v != a.substring(1,a.length); break;
/// equals
default: return v == a; break;
}
}
else {
return !!v;
}
}
}
);
Wich允许你像这样制作一些selecotr:
$('input:field-value(=)');//for empty
$.unique($("li").has("input.txtdate:field-value(=),input.txthrs:field-value(=)")).length;
块引用类>试试这个。它将检索所有输入并循环访问它们。
var count = 0;
$('.txtdate, .txthrs').each(function (){
if($(this).val() == '') { //If inspects if the input has an empty value
//Do something here if the value is empty
//can add css to change the color or
//assign class to it or call method, etc
count++;
}
});
console.log('count: ' + count);
相关文章:
- Javascript-如何使用bootstrap日期时间选择器自动计算两个时间输入之间的差异
- Jquery UI日期选择器不关注输入
- jQuery位置选择器输入样式背景和焦点
- Jquery添加输入字段和日期选择器
- jQuery选择器不识别任何动态创建的HTML输入函数
- JQueryUI日期选择器,输入和日期选择器都打开了
- jQuery选择器,用于查找包含具有特定值的TD输入的TR
- javascript日期选择器检测输入字段中更改的值
- 如何启用由日期选择器 ui 附加的输入?(JQuery 插件)
- 将“日期”设置为Jquery UI日期选择器输入文本框
- 用于多个from输入的JQuery日期选择器函数
- 如何在iOS中对输入元素使用Jquery:焦点选择器
- Jquery,手动输入的日期选择器
- 允许日期选择器使用文本输入字段
- jquery:输入选择器未选择:选择元素
- 无法为动态加载的输入框加载日期选择器和小部件
- 带有 Li 的 jquery 输入选择器
- Javascript名称数组输入选择器(name[sometext])
- Jquery点击选择图像url而不是默认的输入选择器
- jQuery:Chrome扩展中的输入选择器's内容脚本