jQuery - nextAll(） 选择器用于父子子子项

jQuery - nextAll() selector for Parent-Child-Sub Child

本文关键字：用于 父子 选择器 nextAll jQuery      更新时间：2023-09-26

HTML： 

<option data-task-hours="100" value="1"> - Parent Task</option>
<option data-task-hours="50" value="2"> -  - Child task 1 </option>
<option data-task-hours="50" value="5"> -  - Child task 2</option>

jQuery 以获取Parent Task的子项 

var selectedOption = $('#dropDownId option:selected')
var selectedOptionValue = selectedOption.data('task-hours');
var sum = 0;
selectedOption.nextAll().each(function(){
    if (sum < selectedOptionValue) {
        sum += $(this).data('task-hours');
    } else {
        sum = selectedOptionValue;
        return false;
    }
});

这给出了子任务的总价值 Parent Task 。 如果那时我需要在所需的 HTML 下添加子子Child Task 1子级将是

<option data-task-hours="100" value="1"> - Parent Task</option>
<option data-task-hours="50" value="2"> -  - Child task 1 </option>
<option data-task-hours="25" value="3"> -  -  - Sub Child task 1.1</option>
<option data-task-hours="50" value="5"> -  - Child task 2</option>

nextAll()将从 doprdown 获取任何选定选项下的所有后续选项。我怎么知道Child Task 1是否有考虑到亲子子关系的Sub Child task 1.1？

您需要为父子层次结构添加属性，例如，

对作为任何父选项的子选项的子项使用数据父属性，例如data-parent="value of parent option" （data-parent="2"）

所以 html 看起来像， 

<option data-task-hours="100" value="1"> - Parent Task</option>
<option data-task-hours="50" value="2"> -  - Child task 1 </option>
<option data-task-hours="25" value="3" data-parent="2"> -  -  - Sub Child task 1.1</option>
<option data-task-hours="50" value="5"> -  - Child task 2</option>

现在，您需要在nextAll（）中传递data-parent属性，如下所示： 

selectedOption.nextAll("[data-parent='"+selectedOption.val()+"']").each(function(){
    if (sum < selectedOptionValue) {
        sum += $(this).data('task-hours');
    } else {
        sum = selectedOptionValue;
        return false;
    }
});

JSFiddle 你可以得到总任务小时数：

var selectedOption = $('#dropDownId option:selected')
var selectedOptionValue = selectedOption.data('task-hours');
var sum = 0;
var currentLevel = selectedOption.text().split('-').length;
selectedOption.nextAll("option").each(function() {
    if(this.text.split('-').length > currentLevel){
         if (sum < selectedOptionValue) {
           sum += $(this).data('task-hours');
        } else {       
           sum = selectedOptionValue;
           return false;
       }
    }
   });
console.log(sum);
相关文章：