Question

我是jQuery的新手。 简而言之，

当我有这样的DOM结构时：

<table id="hello" border="1"> <tr>
<td><input id="examsdatesheet-0-1st-exam_date" placeholder="0"></td>
<td><input id="examsdatesheet-1-1st-exam_date" placeholder="1"></td>
<td><input id="examsdatesheet-2-1st-exam_date" placeholder="2"></td>
</tr> </table>

以下行给出了一个索引大于0的所有输入的数组

 var allnext = $('#hello td input:gt(0)');

我将我的DOM结构更改为：

<div class="exams-date-sheet-form">
<table><td>
<div class="form-group field-examsdatesheet-0-1st-exam_date required">
<input type="text" id="examsdatesheet-0-1st-exam_date" class="form-control hasDatepicker" name="ExamsDatesheet[0][1st][exam_date]" value="21/06/2016">
</div>
</td>
<td>
<div class="form-group field-examsdatesheet-1-1st-exam_date required">
<input type="text" id="examsdatesheet-1-1st-exam_date" class="form-control hasDatepicker" name="ExamsDatesheet[0][1st][exam_date]" value="21/06/2016">
</div>
</td></table></div>

现在，当我尝试选择索引大于0的所有元素时，这应该有效：

var allnext = $('.exams-date-sheet-form table tbody tr td input :gt(0)');

但它没有！如何将上述必需元素存储在数组中？

Answer 1

您应该使用.exams-date-sheet-form input:gt(0)作为选择器（注意省略的空格），或者依赖jQuery对象的slice方法。

:gt选择器需要链接到您的input选择器;用空格分隔它们会使选择器被解释为后代通配符，如.exams-date-sheet-form input *:gt(0)，并且由于input元素没有子元素，所以没有任何东西匹配。

＆＃13;

// Using `:gt(0)`
var allnext = $('.exams-date-sheet-form input:gt(0)')
// Using `.slice(1)`
var allnext = $('.exams-date-sheet-form input').slice(1)

console.log(allnext.length) //=> 1
console.log(allnext[0])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="exams-date-sheet-form">
<table><td>
<div class="form-group field-examsdatesheet-0-1st-exam_date required">
<input type="text" id="examsdatesheet-0-1st-exam_date" class="form-control hasDatepicker" name="ExamsDatesheet[0][1st][exam_date]" value="21/06/2016">
</div>
</td>
<td>
<div class="form-group field-examsdatesheet-1-1st-exam_date required">
<input type="text" id="examsdatesheet-1-1st-exam_date" class="form-control hasDatepicker" name="ExamsDatesheet[0][1st][exam_date]" value="21/06/2016">
</div>
</td></table></div>

＆＃13;

Answer 2

为什么不用jquery选择器选择所有元素并使用javascript过滤器过滤它们？像这样：

var allnext = $('exams-date-sheet-form table tbody tr td input')
    .filter(function(item, index){
        return index > 0;
    });

Answer 3

通过使用3种简单的JavaScript方法，您可以实现目标：

 var inputArray = Array.from(document.querySelectorAll('input'));

document.querySelectorAll();：将<inputs>收集到NodeList
Array.from()：将NodeList更改为数组
Array.shift()：从数组中移除第一个<input>

BTW，将<tr>添加到<table>。我认为每个<table>要求至少有一个<tr>。

<强>段

const inputArray = Array.from(document.querySelectorAll('input'));

inputArray.shift();

console.log(inputArray);

<div class="exams-date-sheet-form">
  <table>
    <tr>
      <td>
        <div class="form-group field-examsdatesheet-0-1st-exam_date required">
          <input type="text" id="examsdatesheet-0-1st-exam_date" class="form-control hasDatepicker" name="ExamsDatesheet[0][1st][exam_date]" value="21/06/2016">
        </div>
      </td>
      <td>
        <div class="form-group field-examsdatesheet-2-2nd-exam_date required">
          <input type="text" id="examsdatesheet-2-2nd-exam_date" class="form-control hasDatepicker" name="ExamsDatesheet[0][2nd][exam_date]" value="22/06/2016">
        </div>
      </td>
    </tr>
  </table>
</div>

为什么我的jQuery选择器`... input：gt（0）`不工作？

3 个答案: