查找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 ， 即使是hidden ，也可以使用原始代码进行查询：

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