Question

我有输入文本框列表，其中包含class =“txtdate”

和

另一个输入文本框的列表，其中class =“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>

我必须找到有空日期或空小时（其中任何一个）的李

我试过这样的事情

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

fiddle

但是dint得到了理想的结果

请帮助

谢谢

Answer 1

在“:”之前删除“input”...会更好，但没有做到这一点！

有关更多信息，请参阅Jquery selectors doc

你犯了一些错误。我现在这个应该是正确的：

var count = $("li > input.txtdate[value='']+
                   input.txthrs[value='']").length;

您是否只想检索li和txtdate都为空的txthrs个数？

您可以在行动in this updated palash fiddle

中看到它

要完成，如果空value实际上缺少value attrib时，请使用以下内容：

var count = $("li > input.txtdate:not([value])+
                 input.txthrs:not([value])").length;

确保有值attrib：$（'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输入的UPDATE不是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;

我醒了......对不起！所以你从一开始就是正确的，用简单的选择器，你无法检测用户更新的输入！对不起我错了！我创建了这个插件here：

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

允许你制作一些这样的选择：

$('input:field-value(=)');//for empty

$.unique($("li").has("input.txtdate:field-value(=),input.txthrs:field-value(=)")).length;

Answer 2

在查看正确的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);

演示：Fiddle

<强>更新

你可以这样做：

var count = $('li').filter(function () {
    var $txtdate = $(this).find('.txtdate').val();
    var $txthrs = $(this).find('.txthrs').val();
    return ($.trim($txtdate) === '' && $.trim($txthrs) === '')
}).length;

Answer 3

试试这个。它将检索所有输入并迭代它们。

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

带有li的jquery输入选择器

3 个答案: