在DOM元素内选择

时间:2014-07-01 11:16:12

标签: javascript jquery html dom

这是html代码

<div class="extra-sub-block sub-block-experience">
    <h6 style="display:inline;" id="exp-pos-0" class="extra-sub-block-head sub-block-head-experience">CEO</h6>
</div>
<div class="extra-sub-block sub-block-experience">
    <h6 style="display:inline;" id="exp-pos-1" class="extra-sub-block-head sub-block-head-experience">COO</h6>
</div>

有几种这样的类似结构。现在我尝试从每个块中提取值。

var temp=document.getElementsByClassName('sub-block-experience');
var result=$(temp[0]+"#exp-pos-0");

这会引发错误。我跟着selecting element inside another DOM

我也试过

var temp=document.getElementsByClassName('sub-block-experience');
var result=temp[0].find('h6');

这也不起作用。我在这做错了什么。帮助

5 个答案:

答案 0 :(得分:1)

要从所有块中提取值,您可以使用.map()函数,如下所示:

var results = $('.extra-sub-block-head').map(function(){
  return $(this).text();
})

Demo

旁注:由于id在文档中是唯一的,因此您可以使用id选择器(例如var result= $("#exp-pos-0");而不是{{1})直接访问该元素}

答案 1 :(得分:0)

尝试,var result=$(temp[0]).find('h6');

甚至,在您提供的文档链接中,它显示您应该将document.getElementById中的结果包装在$()中以应用jQuery。它的作用是将原生javascript对象转换为jquery对象。

Demo

答案 2 :(得分:0)

 function testIt(){
    var tags, index;
    tags = document.getElementsByTagName('h6');
  for (index = 0; index < inputs.length; ++index) {
    //do something ...
  }
 }

答案 3 :(得分:0)

如果我是正确的你试图获得首席执行官和咕咕声?。如果是这样的情况,那么请使用jquery:

var x= $('.extra-sub-block h6');
//values are
$(x[O]).html();
$(x[1]).html();

答案 4 :(得分:0)

你也可以使用普通的javascript:

var result = document.querySelectorAll('.sub-block-experience h6');

或者如果你喜欢它分开:

var temp = document.querySelectorAll('.sub-block-experience');
var result = [];
for(var i = 0, elem; elem = temp[i]; i++) {
  result = result.concat(elem.querySelectorAll('h6'));
}

但请注意querySelectorAllquerySelector的浏览器兼容性。