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，我需要分别获取这两个值，谢谢。

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)
}

Javascript：获取无ID的值

4 个答案: