Question

以下命令

document.querySelectorAll('#divConfirm table')[1].querySelectorAll('tr')

给出一个节点列表，其中包含3个tablerow（tr）元素。如果我知道列表大小，我可以通过.item(2)访问最后一个元素。

有没有办法直接获取最后一个元素而不先求助于.length？

Answer 1

至少有一种方法

jQuery(document).ready(function($) {
var a = "item_meta[179]";
var b = "item_meta[86]";
var c = $("input[name='item_meta[83]']:checked").val();
$("#button1").on('click', function (){
var form = $("#test");
form.validate({
errorElement: 'span',
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').addClass ("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass ("has-error");
},
rules: {
    a: {
        required: true,
    },
    b: {
        required: true,
        minlength: 4,
    },
},
massages: {
    a: {
        required: "Field is required",
    },
    b: {
        required: "Field is required"
    },
}
});

if (form.valid() == true){
    if(c == '2') {
    $("#ui-id-1").addClass("ui-state-disabled");
    $("#ui-id-3").removeClass("ui-state-disabled");
    $("#accordion").accordion({
    active: 1
    });
    } else {
    $("#ui-id-1").addClass("ui-state-disabled");
    $("#ui-id-5").removeClass("ui-state-disabled");
    $("#accordion").accordion({
    active: 2
    });
    }
}
});
});

但是，以下声明

但如果我在运行脚本之前不知道长度

毫无意义，你已经有了元素的集合，所以你总是知道长度

var els = document.querySelectorAll('#divConfirm table')[1].querySelectorAll('tr');

var last = [].slice.call(els).pop();

另一种选择是

var els = document.querySelectorAll('#divConfirm table')[1].querySelectorAll('tr');

var last = els[els.length - 1];

Answer 2

视具体情况而定：document.querySelector('#divConfirm table tr:last-of-type')

Answer 3

由于 NodeList没有弹出方法。

在新数组中使用spread syntax，然后在pop()中使用最后一个元素。

这基本上将Nodelist复制为常规数组，因此pop()和其他数组方法变得可用。在不填充变量的情况下，垃圾收集器将快速清空它，但请注意您的内存使用情况！ 尽可能使用元素id ，以避免整个DOM的解析，并寻求最佳性能。

console.log(
  // Last elem with pop()
  [...document.querySelectorAll("div")].pop()
)

console.log(
  //  2nd elem
  [...document.querySelectorAll("div")].slice(1)[0]
)

console.log(
  // By index :) just in case
  document.querySelectorAll("div")[0]
)

<div>The sun</div>
<div>is</div>
<div>shinning</div>

Answer 4

您可以使用array.pop()。它返回最后一项但是将它删除到数组！

从节点列表中获取最后一项而不使用.length

4 个答案: