使用子节点检查 class 并通过 javascript 获取属性

Question

我的代码是这样的，因为我使用了 jquery 树

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

检查 class 如果有 tree-checkbox1 = 选中，如果选中则获取节点 ID 父节点。

我试过2个选项。 1 select parent 然后检查是否有子 tree-checkbox1 如果选中则获取 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 然后获取属性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);
 }

仍然没有运气:(，我不是专家 javascript 有什么帮助吗？

Answer 1

不确定 tree-checkbox1 = checked 是什么意思，但如果我理解正确的话，你正在检查元素是否有 tree-checkbox1 class。

使用 jquery，您可以对 select 使用此 class 的所有元素执行此操作，并从父级

获取节点 ID 属性

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

Answer 2

您的代码略有改动，下面给出的是获取节点 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);

两点注意事项

从数组访问时使用索引器doc[i]
使用带圆括号而不是方括号的方法名称

使用子节点检查 class 并通过 javascript 获取属性

check class using childNodes and get attribute by javascript

javascript

checkbox