0

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

小提琴

但力求得到想要的结果

请帮忙

谢谢

4

3 回答 3

1

:在“ ”之前删除“ input”...会更好，但没有成功！

有关更多信息，请参阅Jquery 选择器文档

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

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

您只想检索 和都为空的li地方的数量吗？txtdatetxthrs

您可以在这个更新的 palash fiddle 中看到它的实际效果

要完成，如果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 输入的 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;

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

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;
于 2013-10-25T08:36:00.110 回答
1

查看正确的 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;
于 2013-10-25T08:42:39.780 回答
0

试试这个。它将检索所有输入并遍历它们。

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);
于 2013-10-25T09:24:58.953 回答