带有 Li 的 jquery 输入选择器

 <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>

  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);