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

现在使用所有选择器将其作为上下文/根。 E.g。

 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>

Answer 2

您应该使用此方法找到输入

$('#IncomingInformationsTemplate').find(':input').each(function(i,e) {
   console.log((i+1)+'. '+$(e)[0].outerHTML);
   $(e).addClass('manipulate-it'); //manipulate it
});

查找jquery对象中的所有输入

2 个答案: