在DOM元素内选择

Question

This is the html code

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

There are several such similar structures. Now I try to extract the values from each block.

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

This throws an error. I followed selecting element inside another DOM

I also tried

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

This doesn't work as well. What am I doing wrong here. Help?

Answer 1

For extracting the values from all blocks, you can use .map() function as follows:

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

Demo

side note: Since id is unique in a document, you can directly access the element using id selector like var result= $("#exp-pos-0"); instead of var result=$(temp[0]+"#exp-pos-0");

Answer 2

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

Even, in the documentation link that you gave in question, it shows that you should wrap your result from document.getElementById in $() to be applied with jQuery. What it does is, that it converts the native javascript object into a jquery object.

Demo

Answer 3

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

Answer 4

If I am correct you are trying to get ceo and coo?.If that's the case then with jquery:

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

Answer 5

You could also use plain javascript:

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

Or if you like it separate:

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

But be aware of the browser compatability of querySelectorAll and querySelector .