javascript - 查找 jquery 对象中的所有输入

Question

我的模板有一点问题。

我想用 jquery 读入模板，然后找到该对象中的所有输入来操作它们。

不幸的是，输入没有返回。

我已经在另一个地方使用了“checkInputs”功能。目标不是模板，它可以正常工作。

这是我的测试代码:

listOfTemplateInputs = checkInputs("#IncomingInformationsTemplate");
alert("Hidden: " + listOfTemplateInputs.Hidden.length + ", Fields: " + listOfTemplateInputs.Fields.length);


function checkInputs(target) {
  var ListOfFields = [];
  var ListOfCheckBoxes = [];
  var ListOfHidden = [];

  $(target + " input[type='text'], textarea, input[type='password']").each(function() {
    var input = $(this);
    ListOfFields.push(input);
  });

  $(target + " input[type='checkbox']").each(function() {
    var input = $(this);
    ListOfCheckBoxes.push(input);
  });

  $(target + " input[type='hidden']").each(function() {
    var input = $(this);
    ListOfHidden.push(input);
  });

  var inputList = {
    Fields: ListOfFields,
    CheckBoxes: ListOfCheckBoxes,
    Hidden: ListOfHidden
  };

  return inputList;
}

这是我的模板:

<script id="IncomingInformationsTemplate" type="text/html">
  <tr class="">
    <input autocomplete="off" name="IncomingInformations.Index" type="hidden" value="5eda7c21-9b4e-4eb5-b992-6a3ea16a46cd" />
    <td>
      <div>
        <input type="hidden" name="country" value="Norway">
        <input type="hidden" name="country2" value="Germany">
        <input type="text" name="Name" value="Tom">
        <input type="text" name="Name2" value="Lisa">
      </div>
    </td>
  </tr>
</script>

Answer 1

问题是 script 标签不会解析 HTML 并从中创建 DOM。

它的内容只是一个字符串。

为了能够从中进行选择，您应该解析它(可以使用 jQuery 来完成)并从创建的(解析的)对象中进行选择。

注意在下面的代码中我首先根据模板的文本内容创建一个“迷你(虚拟)DOM”:

var miniDOM = $($(target).text());

现在使用所有将其作为上下文/根的选择器。例如

 miniDOM.find("input[type='text'], textarea, input[type='password']").each(function() {

这会找到您想要的元素。

listOfTemplateInputs = checkInputs("#IncomingInformationsTemplate");
alert("Hidden: " + listOfTemplateInputs.Hidden.length + ", Fields: " + listOfTemplateInputs.Fields.length);


function checkInputs(target) {
  var miniDOM = $($(target).text());

  var ListOfFields = [];
  var ListOfCheckBoxes = [];
  var ListOfHidden = [];

  miniDOM.find("input[type='text'], textarea, input[type='password']").each(function() {
    var input = $(this);
    ListOfFields.push(input);
  });

  miniDOM.find("input[type='checkbox']").each(function() {
    var input = $(this);
    ListOfCheckBoxes.push(input);
  });

  miniDOM.find("input[type='hidden']").each(function() {
    var input = $(this);
    ListOfHidden.push(input);
  });

  var inputList = {
    Fields: ListOfFields,
    CheckBoxes: ListOfCheckBoxes,
    Hidden: ListOfHidden
  };

  return inputList;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="IncomingInformationsTemplate" type="text/html">
  <tr class="">
    <input autocomplete="off" name="IncomingInformations.Index" type="hidden" value="5eda7c21-9b4e-4eb5-b992-6a3ea16a46cd" />
    <td>
      <div>
        <input type="hidden" name="country" value="Norway">
        <input type="hidden" name="country2" value="Germany">
        <input type="text" name="Name" value="Tom">
        <input type="text" name="Name2" value="Lisa">
      </div>
    </td>
  </tr>
</script>

当然，您也可以将该 script 转换为任何可渲染元素，例如 div 或 span，即使隐藏，您可以使用原始代码查询它:

listOfTemplateInputs = checkInputs("#IncomingInformationsTemplate");
alert("Hidden: " + listOfTemplateInputs.Hidden.length + ", Fields: " + listOfTemplateInputs.Fields.length);


function checkInputs(target) {
  var ListOfFields = [];
  var ListOfCheckBoxes = [];
  var ListOfHidden = [];

  $(target + " input[type='text'], textarea, input[type='password']").each(function() {
    var input = $(this);
    ListOfFields.push(input);
  });

  $(target + " input[type='checkbox']").each(function() {
    var input = $(this);
    ListOfCheckBoxes.push(input);
  });

  $(target + " input[type='hidden']").each(function() {
    var input = $(this);
    ListOfHidden.push(input);
  });

  var inputList = {
    Fields: ListOfFields,
    CheckBoxes: ListOfCheckBoxes,
    Hidden: ListOfHidden
  };

  return inputList;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="IncomingInformationsTemplate" style="display: none">
  <tr class="">
    <input autocomplete="off" name="IncomingInformations.Index" type="hidden" value="5eda7c21-9b4e-4eb5-b992-6a3ea16a46cd" />
    <td>
      <div>
        <input type="hidden" name="country" value="Norway">
        <input type="hidden" name="country2" value="Germany">
        <input type="text" name="Name" value="Tom">
        <input type="text" name="Name2" value="Lisa">
      </div>
    </td>
  </tr>
</div>