JavaScriptでノードの値を取得しようとしても、「null」と表示され続ける

Question

現在、HTML要素からリストを作成しています。私の目標は、テーブルの "次のページ"ボタンをクリックすると、テーブル内のすべての値のリストを作成することです。その後、リスト内の最初の項目の値（表の最初の行の値にする必要があります）を通知するアラートポップアップが表示されます。しかし、それは常に "ヌル"に戻ります。ここで

は

ここ

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

は、私は現在のテーブルがあり（約15項目があり

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

ターゲットにしていますテーブルの行のHTMLの例である私のJSですDBからテーブルを作成するコードです）、警告は正しく$allSerialNumbers.lengthが15と表示されます。ただし、最初のアイテムのnodeValueはnull、この例では実際に "56"と言います。 （実際の表では、すべての値が異なります）。

JavaScriptのノードを間違って使用していますか？

Answer 1

まず、jQueryを使用しているかのように、document.getElementsByClassName（vanilla JSセレクタ）を使用する必要はありません。

$('.box-electrode')で要素を選択できます。

もう1つのこと：アンカー（<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()指定されたノード属性の値を取得します。

バニラ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

あなたはまた、単に属性「値」を取得する属性んし、その後、ちょうどこのように、それは.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