Question

我目前正在玩从HTML元素创建列表。我的目标是当您单击表格上的“下一页”按钮时，在表格中创建所有值的列表。然后我弹出一个警告，告诉我列表中第一个项的值（应该是表中第一行的值）。但是，它总是回来“无效”。

这是我的JS

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = document.getElementsByClassName('box-electrode');
    alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers.item(0).nodeValue);
});

以下是我要定位的表格行中的HTML示例

<a href="#" class="box-electrode" value="56" title="Pack this electrode">
    <i class="fa fa-gift fa-fw text-warning"></i>
</a>

目前该表有大约15个项目（其他地方有代码从数据库创建表格），并且警报正确地说$allSerialNumbers.length是15.但是，它表示第一个nodeValue item是 null ，当它在这个例子中实际应该说“56”时。（在实际表中，所有值都不同）。

我使用JavaScript的节点错了吗？

Answer 1

首先，就像你使用jQuery一样，你不需要使用document.getElementsByClassName（vanilla JS选择器）。

您可以使用$('.box-electrode')选择元素。

另一件事：锚（<a>）元素没有value属性。如果你试图用jQuery .val()来获取它，你就不会得到它，因为它不符合规范。

如果要设置自定义属性，可以使用data-属性。像这样：

<a href="#" class="box-electrode" data-value="56" title="Pack this electrode">
    <i class="fa fa-gift fa-fw text-warning"></i>
</a>

jQuery解决方案：

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = $('.box-electrode');
    alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers.first().attr('data-value'));
});

.first()获取jQuery对象中的第一个元素。
.attr()获取指定节点属性的值。

Vanilla JS：

document.getElementsByClassName("page-link")[0].addEventListener("click", function () {
    var $allSerialNumbers = document.getElementsByClassName('box-electrode');

    alert(
    'The first in the list of ' + $allSerialNumbers.length + ' items is' +
    ' data-value: ' + $allSerialNumbers[0].getAttribute('data-value') +
    ', title: ' + $allSerialNumbers[0].title
  );
});

Answer 2

首先，以$开头的变量按惯例用于jquery对象。 $ allSerialNumbers是一个节点元素，而不是一个jquery对象。

$(document).on('click', ".page-link", function (e) {
     var $allSerialNumbers = $('.box-electrode');
     alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers[0].text());
});

Answer 3

如果您已经在使用jquery，为什么不这样做：

var $allSerialNumbers = $('.box-electrode');

alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers[0]);

Answer 4

这应该有用。

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = $('.box-electrode'),
          $targetVal =  $(e.target).attr('data-value');
    alert('The first in the list of ' + $allSerialNumbers + ' items is ' + $targetVal
});

Answer 5

您也可以只使用属性来获取属性＆＃34; value＆＃34;然后只需使用.value访问它的值，如下所示：

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = $('.box-electrode');
    alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers[0].attributes["value"].value);
});

由于您使用的是jquery，因此无需执行.getElements ..

如果你想尝试使用同一个例子的其他选项，你有一个工作小提琴手：https://jsfiddle.net/spilafis/ufp4bz80/10

试图在JavaScript中获取节点的值，但它一直说它是“空”

5 个答案: