javascript - jQuery - 父子-子子的 nextAll() 选择器

Question

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 获取父任务的子任务

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;
    }
});

这给出了父任务下子任务的总值(value)。如果我需要在 Child Task 1 下添加子子任务，则所需的 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"> -  -  - Sub Child task 1.1</option>
<option data-task-hours="50" value="5"> -  - Child task 2</option>

nextAll() 将从 doprdown 中获取任何选定选项下的所有后续选项。考虑到父子子子关系，我如何知道子任务 1 下是否有 子子任务 1.1 ？

Answer 1

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

对任何父选项的子级使用 data-parent 属性，例如，data-parent="父选项的值" (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;
    }
});