简体   繁体   中英

check class using childNodes and get attribute by javascript

My code like this since I using jquery tree

<ul class="tree">
        <li>
                <div class="tree-node" node-id="102009002002000000000000" style="cursor: pointer;">
                        <span class="tree-hit tree-expanded"></span>
                        <span class="tree-icon tree-folder tree-folder-open"></span>
                        <span class="tree-checkbox tree-checkbox1"></span>
                        <span class="tree-title">TEXT-1</span>
                </div>
        </li>
        <li>
                <div class="tree-node" node-id="102009002002001000000000" style="cursor: pointer;">
                        <span class="tree-indent"></span>
                        <span class="tree-hit tree-expanded"></span>
                        <span class="tree-icon tree-folder tree-folder-open"></span>
                        <span class="tree-checkbox tree-checkbox1"></span>
                        <span class="tree-title">TEXT-2</span>
                </div>
                <ul style="display: block;">
                        <li>
                                <div class="tree-node" node-id="102009002002001001000000" style="cursor: pointer;">
                                        <span class="tree-indent"></span>
                                        <span class="tree-indent"></span>
                                        <span class="tree-hit tree-collapsed"></span>
                                        <span class="tree-icon tree-folder"></span>
                                        <span class="tree-checkbox tree-checkbox1"></span>
                                        <span class="tree-title">CHILD TEXT-2</span>
                                </div>
                        </li>
                </ul>
        </li>
</ul>

Check the class if have tree-checkbox1 = checked, if checked get the node-id parent.

I have tried 2 option. 1 select parent then check if have child tree-checkbox1 if checked then get the node-id

var kd_org = []; //for store data
var doc = document.getElementsByClassName('tree-node');
        for (var i = 0; i < doc.length; i++) {
               for (var x = 0; x < doc[i].length; x++) {
                 if (doc[i].childNodes[x].className == 'tree-checkbox1') {
                        kd_org.push(doc[i].getAttribute['node-id']);
                   } 
                }
        }

second option select all class tree-checkbox1 then get the attribute parent

var kd_org = []; //for store data
 var doc = document.getElementsByClassName('tree-checkbox1');                
 for (var i = 0; i < doc.length; i++) {
        var value = doc.parentNode.getAttribute['node-id'];
         kd_org.push(value);
 }

Still no luck:(, i not expert on javascript any help?

Not sure what tree-checkbox1 = checked means, but if I understand correctly you are checking if the element has tree-checkbox1 class.

With jquery you can do this to select all the elements with this class, and get the node-id attr from parent

$('.tree-checkbox1').each((index, element) => {
    console.log($(element).parent().attr('node-id'));
});

Your code has minor changes, below given is the working code that gets the node id

var kd_org = []; //for store data
var doc = document.getElementsByClassName('tree-checkbox1');                
for (var i = 0; i < doc.length; i++) {
    var value = doc[i].parentNode.getAttribute('node-id');
     kd_org.push(value);
}

console.log(kd_org);

Couple of points to note

  1. use indexer when you are accessing from the array doc[i]
  2. use the method name with parenthesis instead of square brackets

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM