jQuery 3为多属性查找提供了错误的答案

Question

我有一个在jQuery 1.4.3上运行良好但不适用于jQuery 3.1.1的构造。在我的页面中，我有许多INPUT字段，如下所示：

<input type="text" name="docNo" oninput="setIgnoreDateRange();" data-auto-select-ignoredate="true">

＆＃34; data-auto-select-ignoredate＆＃34; setIgnoreDateRange（）使用该属性在表单的其他位置切换复选框。

在该函数中，我询问这些标记的INPUT字段中有多少具有内容：

$("form[name='salesOrderSearchForm']").find('[data-auto-select-ignoredate="true"][value!=""]').length

在我的jQuery 1.4.3网页中，我得到的答案取决于有多少字段有价值。如果总共有六个字段，并且其中一个有值，则得到长度为1。

在我的jQuery 3.1.1网页中，我得到了表单上字段数量的简单计数，好像[value!=""]甚至没有。如果总共有六个字段，并且其中一个字段有值，则我得到六个字段。

多属性搜索的制定有什么变化吗？

Answer 1

在更新的jQuery版本中，您可以按input属性选择value，但不能选择实际的JavaScript .value属性。

现在你必须使用过滤。以下是如何做到这一点：

ES6

let ignoringInputs = document.querySelectorAll('form[name="salesOrderSearchForm"] input[data-auto-select-ignoredate="true"]');
ignoringInputs = [...ignoringInputs].filter((element) => element.value !== '');

console.log(ignoringInputs.length);

• [...ignoringInputs]被称为spread operator，
• (parameter) => function被称为arrow function。

的jQuery

我有一段时间没有使用jQuery，但可能类似于：

var ignoringInputs = $('form[name="salesOrderSearchForm"] input[data-auto-select-ignoredate="true"]');
ignoringInputs = ignoringInputs.filter(function () {
    return $(this).val() !== '';
}

console.log(ignoringInputs.length);

工作示例（ES6）

document.getElementById('checkButton').addEventListener('click', () => {
  let ignoringInputs = document.querySelectorAll('form[name="salesOrderSearchForm"] input[data-auto-select-ignoredate="true"]');
  ignoringInputs = [...ignoringInputs].filter((element) => element.value !== '');
  
  console.log(ignoringInputs.length);
});

.as-console-wrapper { /* Only for output console */
  top: 50%;
}

<form name="salesOrderSearchForm">
  <input type="text" name="docNo" data-auto-select-ignoredate="true">
  <input type="text" name="docNo" data-auto-select-ignoredate="true">
  <input type="text" name="docNo" data-auto-select-ignoredate="true">
  <input type="text" name="docNo" data-auto-select-ignoredate="true">
</form>
<input type="button" value="Check" id="checkButton"/>