给定一个元素，在NodeList中找到它的索引

Question

当你在NodeList中有NodeList和DOM元素时，有什么方法可以找出NodeList中元素的索引？

Answer 1

您无需将NodeList转换为使用indexOf()，只需使用

即可

Array.prototype.indexOf.call(nodeList, element)

见下文：

var p = document.getElementById('3')
var nodelist = document.getElementsByTagName('p')

console.log(Array.prototype.indexOf.call(nodelist, p))

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tortor sem, egestas id lectus sit amet, bibendum aliquam nulla. Quisque quam arcu, sagittis vitae consectetur ac, interdum vel justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam bibendum rhoncus ipsum id ultricies. Integer sodales posuere magna, eu vehicula velit condimentum vitae. Quisque id felis sapien. Nullam gravida laoreet efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur luctus ac dui eu placerat. Nam ornare lorem sapien, at dapibus lorem aliquam in. Cras sapien odio, fermentum quis ante sed, faucibus consequat elit.
</p>
<p>
Nam ac suscipit massa. In molestie pharetra placerat. Sed ultrices ut diam vel consequat. Morbi et lectus in massa rhoncus volutpat. Duis sit amet tempus ligula, in gravida leo. Nunc posuere rutrum nibh. Ut non sem ac augue efficitur efficitur. Nunc ornare dui enim, quis interdum purus ultricies non. Donec sapien quam, aliquam in metus vel, euismod porta metus. Phasellus euismod pretium velit a efficitur. Aliquam faucibus ultrices libero a dictum. Morbi convallis magna quis accumsan scelerisque. Donec porta elit sed orci pellentesque, id pulvinar nunc luctus.
</p>
<p>
Aliquam enim diam, rhoncus et arcu nec, sodales pharetra mauris. Morbi sodales finibus magna, in aliquet magna ultrices ut. Praesent varius placerat nulla, non mattis justo commodo rhoncus. Phasellus dolor ligula, finibus ac ipsum vel, dictum ullamcorper turpis. In ut ullamcorper mi. Vestibulum laoreet interdum vulputate. Phasellus venenatis feugiat turpis eget pretium. Integer blandit tellus urna, sed commodo purus efficitur sit amet. Curabitur ex lacus, elementum et augue ut, egestas hendrerit ipsum. Curabitur condimentum diam felis, at efficitur nunc convallis sed.
</p>
<p id="3">
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam massa nunc, hendrerit eu odio nec, rhoncus ultricies purus. Pellentesque eros velit, porttitor eu lectus vel, convallis sagittis tortor. Praesent facilisis, augue ac volutpat interdum, odio nulla ornare nulla, sed luctus sapien lectus at ipsum. Vestibulum auctor lobortis pellentesque. Aliquam interdum in lacus sed rhoncus. Suspendisse a velit quis leo iaculis dapibus.
</p>
<p>
Nunc eget tristique eros. Cras elementum, nunc eu vestibulum tempor, eros nibh mattis turpis, ac varius erat nisi in felis. Proin nulla libero, viverra quis cursus lacinia, venenatis ac quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla vitae est non metus rutrum dignissim tincidunt quis elit. Sed rhoncus augue eu orci ornare congue. Suspendisse feugiat dapibus blandit. Suspendisse a egestas diam, ut efficitur leo. Sed porttitor ornare tristique. Quisque quis nisl a felis viverra mollis a sed nibh. Sed maximus, dolor at ultrices lacinia, quam sem lobortis enim, eu malesuada augue enim vel neque. Integer dapibus eros eget tortor egestas, quis bibendum ipsum tempor.
</p>

如果您认为过于冗长，则可以存储对Array.prototype.indexOf.call()的引用：

const indexOf = Function.prototype.call.bind(Array.prototype.indexOf)

console.log(indexOf({ 500: 'foo', length: 1000 }, 'foo'))

确保indexOf()的目标具有数字属性和length。

Answer 2

将其转换为数组：

indexOf

然后在其上使用var index = arr.indexOf(element); ：

$("document").ready(function() {
    var y, x, cellColor;
    //console.log("tata");

    $("#sizePicker").submit(function(event) {
        event.preventDefault();
    });

    $('input[type="submit"]').click(function makeGrid(y, x) {
        y = Number($("#inputHeight").val());
        x = Number($("#inputWeight").val());
        $("#pixelCanvas tr").remove();
        for (i = 0; i < y; i++) {
            $("#pixelCanvas").append("<tr class='vertical'></tr>");
        }
        for (j = 0; j < x; j++) {
            $(".vertical").append("<td class='cell' ></td>");
        }
        $("#pixelCanvas tr td").css("background-color", "red");
    });

    $("#pixelCanvas tr td").click(function() {
        $(this).css("background-color", "blue");
    });
});