遍历子级并获取属性

Question

I'm trying to create a div which should replace the select element (because the real one is not necessary in that case) and I try to get the data-select attribute of each option (which represented by an a tag) but I probably do something wrong and I'm getting null . that's my code - HTML:

<div class="select" data-after="&#x43;">
    <i data-select-value="">Date &amp; Time</i>
    <div class="options">
        <a href="#" data-select="Date &amp; Time">Date &amp; Time</a>
        <a href="#" data-select="Alphabetical">Alphabetical</a>
        <a href="#" data-select="Modified">Modified</a>
    </div>
</div>
<div class="select" data-after="&#x43;">
    <i data-select-value="">Delete</i>
    <div class="options">
        <a href="#" data-select="Delete">Delete</a>
        <a href="#" data-select="Edit">Edit</a>
        <a href="#" data-select="Unpublish">Unpublish</a>
    </div>
</div>

JS:

var selectbox = document.getElementsByClassName('select');
for(var i = 0; i < selectbox.length; i++) {
    selectbox[i].onclick = function() {
        var elechild = this.childNodes;
        var x = 0;
        for(x; x < elechild.length; x++) {
            elechild[x].onclick = function() {
                console.log(this.getAttribute('data-select'));
            }
        }
    }
}

How can I solve this and get each attribute (please, no jQuery)? (btw please excuse my english if I had any misspellings)

Thank you very much!

Answer 1

Basically, you can get all elements using querySelectorAll in javascript. https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll

Try this:

 var selectors = document.querySelectorAll('.options a'); for (var x = 0; x < selectors.length; x++) { selectors[x].onclick = function() { console.log(this.getAttribute('data-select')); } } 

 <div class="select" data-after="&#x43;"> <i data-select-value="">Date &amp; Time</i> <div class="options"> <a href="#" data-select="Date &amp; Time">Date &amp; Time</a> <a href="#" data-select="Alphabetical">Alphabetical</a> <a href="#" data-select="Modified">Modified</a> </div> </div> <div class="select" data-after="&#x43;"> <i data-select-value="">Delete</i> <div class="options"> <a href="#" data-select="Delete">Delete</a> <a href="#" data-select="Edit">Edit</a> <a href="#" data-select="Unpublish">Unpublish</a> </div> </div> 

Answer 2

You really had overthought that a bit. You only need to gather up the links and loop through them. You might have noticed that in your code, you had to click twice for anything to happen - - that was because you were applying a click event to ALL the children of the select div elements as well as the select div elements, which included the option div.

Also, it's better to not use the onXyz event properties of DOM objects and instead use the W3C DOM Event standard , which uses addEventListener as an event callback registration method. This allows for a more standard and more robust event registration / de-registration model.

 // Just get the anchors that are children of your options element: var selectAnchors = document.querySelectorAll(".options a"); // Just loop through the anchors. No need to loop the divs for(var x = 0; x < selectAnchors.length; x++) { selectAnchors[x].addEventListener("click", function() { console.log(this.getAttribute('data-select')); }); } 

 <div class="select" data-after="&#x43;"> <i data-select-value="">Date &amp; Time</i> <div class="options"> <a href="#" data-select="Date &amp; Time">Date &amp; Time</a> <a href="#" data-select="Alphabetical">Alphabetical</a> <a href="#" data-select="Modified">Modified</a> </div> </div> <div class="select" data-after="&#x43;"> <i data-select-value="">Delete</i> <div class="options"> <a href="#" data-select="Delete">Delete</a> <a href="#" data-select="Edit">Edit</a> <a href="#" data-select="Unpublish">Unpublish</a> </div> </div> 

Answer 3

Use this:

var options = document.querySelectorAll('.select .options a');
for (var x = 0; x < options.length; x++) {
  options[x].onclick = function() {
    console.log(this.getAttribute('data-select'));
  }
}