javascript - Javascript：获取没有 ID 的值

Question

<div class="CurrencyQuote">


<div class="column">
    <div class="form-label">Pair: </div><div>BUX/TIX</div>
    <div class="form-label padding-top">Spread: </div><div>113</div>
</div>
<div class="column">
    <div class="form-label">Rate: </div><div>10.159/10.272</div>
    <div class="form-label padding-top">High/Low: </div><div>115</div>
</div>

</div>

我想获得值 113 和值 115，但是如果没有 javascript 中的 ID，我该如何做呢？我无法更改 HTML，我需要分别获取这 2 个值，谢谢。

Answer 1

您可以使用querySelectorAll()CSS 选择器来使用和构建元素的唯一路径，如下所示：

var els = document.querySelectorAll( '.column .form-label.padding-top ~ div' );

for( var i=els.length; i--; ) {
  console.log( els[i].innerHTML );
}

---

为了让所有 jQuery 粉丝也开心：

$( '.column .form-label.padding-top ~ div' ).each( function() { console.log( this.text() ); } );

Answer 2

使用 JQuery，您可以这样做

$(document).ready(function(){

    $(".padding-top").each(function(){
     alert($(this).next().html());
    });

});

http://jsfiddle.net/WYSd4/

Answer 3

这应该与任何类型的浏览器都非常兼容；它使用类搜索所有元素column，然后找到最后一个<div>子元素：

var columns = document.getElementsByClassName('column'),
values = [];

for (var i = 0, n = columns.length; i != n; ++i) {
  var node = columns[i].lastChild;
  // find last div child
  while (node && node.nodeName != 'DIV') {
    node = node.previousSibling;
  }
  if (node) {
    values.push(node.textContent || node.innerText || '');
  }
}

console.log(values);

Answer 4

var query = document.querySelectorAll('.column > .form-label');
for(var i=0,l=query.length;i<l;++i){
    if(query[i].innerHTML == 'Spread: '
    || query[i].innerHTML == 'High/Low: '
    ) console.log(query[i].nextElementSibling.innerHTML)
}