单击+；CTRL键选择一行，然后将CSS类添加到该行下方的所有行，直到使用JavaScript找到具有另一个CSS类的行

我有一个JavaScript应用程序，它有项目任务记录，允许您拖放以重新定位排序顺序

这是一篇包含代码和演示的详细文章。我的问题在底部…

还有第二种类型的任务记录，它充当虚拟任务列表标题，以便您可以在任务之间拖放列表标题记录，以分离和创建更有组织的任务列表

此屏幕截图显示了一些单击和拖放功能，包括：

• 单击任务行拖动手柄可将

  .selected

  CSS类添加到该行，该类会更改背景颜色以显示其已“选中”。选择任务行后，还可以单击并按住拖动手柄，同时将该行垂直拖动到新位置
• 按住

  CTRL

  键盘键，同时单击任务行拖动手柄，可以选择多行。选择多行后，可以单击并将多行拖放到新的排序顺序位置
• 选择一行或多行后，单击任何其他拖动手柄将取消选择所有行，然后选择您单击的行。除非按住

  CTRL

  键以执行多选功能，否则会出现这种情况
• 拖动Tsk标题行或任何相关行可以组织创建任务列表的顺序

---

演示

---

---

JavaScript-添加拖放并单击以选择多行

// Handle Project Task Drag and Drop Sorting on Task Edit Screen.
$("#project_tasks").on('click', '.handle', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).parent().toggleClass("selected");
    } else {
        $(this).parent().addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    handle: '.handle',
    placeholder: 'ui-state-highlight',
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        var helper = $('<div/>');
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        var elements = item.parent().children('.selected').clone();
        item.data('multidrag', elements).siblings('.selected').remove();
        return helper.append(elements);
    },
    stop: function (e, info) {
        info.item.after(info.item.data('multidrag')).remove();
        $('.selected').removeClass('selected');
        updateSortOrderNumbers();
    }
});

function updateSortOrderNumbers(){
  showTaskUnSavedChangesHeaderBar();
  jQuery('.sortable div.task_row').each(function(idx) {
    var inputField = jQuery(this).find("[id^='sort_order']");
    jQuery(inputField).val(idx+1);
  });
}

//在任务编辑屏幕上处理项目任务拖放排序。
$（“#项目_任务”）。在（'click'，'handle'，函数（e）上{
if（e.ctrlKey | | e.metaKey）{
$（this.parent（）.toggleClass（“选定”）；
}否则{
$（this）.parent（）.addClass（“选定”）.sides（）.removeClass（“选定”）；
}
}).可排序({
句柄：'.handle'，
占位符：“ui状态突出显示”，
延迟：150，//在尝试选择时需要防止意外拖动
回复：0，
助手：功能（e，项目）{
var helper=$（''）；
如果（！item.hasClass（'selected'））{
item.addClass（'selected'）.sides（）.removeClass（'selected'）；
}
var elements=item.parent（）.children（'.selected'）.clone（）；
item.data（'multidrag'，elements.）。同级（'.selected'）.remove（）；
返回helper.append（元素）；
},
停止：功能（e、信息）{
info.item.after（info.item.data（'multidrag'））.remove（）；
$（'.selected'）.removeClass（'selected'）；
updateSortOrderNumber（）；
}
});
函数updateSortOrderNumber（）{
showTaskUnSavedChangesHeaderBar（）；
jQuery（'.sortable div.task_row'）。每个（函数（idx）{
var inputField=jQuery（this）.find（“[id^='sort\u order']”）；
jQuery（inputField）.val（idx+1）；
});
}

HTML结构

<div id="project_tasks" class="tasks_block sortable list ui-sortable" style="display: block;">

    <!-- TASK HEADING ROW -->
    <div id="task_11" class="heading-row task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_11" id="sort_order_11" class="sort_order" size="15" type="hidden" value="1">
        <input name="heading_11" id="heading_11" class="heading" size="15" type="hidden" value="1">
        <input name="name_11" id="name_11" class="task-heading name" size="45" type="text" value="List Heading 1" placeholder="Type a Project Task List Heading Here..." style="cursor: auto; ">
         <br style="clear:both;">
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 2">
        </div>
        <br style="clear:both;">
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 3">
        </div>
        <br style="clear:both;">
    </div>

    <!-- TASK HEADING ROW -->
    <div id="task_11" class="heading-row task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_11" id="sort_order_11" class="sort_order" size="15" type="hidden" value="1">
        <input name="heading_11" id="heading_11" class="heading" size="15" type="hidden" value="1">
        <input name="name_11" id="name_11" class="task-heading name" size="45" type="text" value="List Heading 2" placeholder="Type a Project Task List Heading Here..." style="cursor: auto; ">
         <br style="clear:both;">
    </div>


    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 6">
        </div>
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 7">
        </div>
    </div>


</div>

---

问题：新建单击以选择任务列表中的所有任务功能：

<div id="project_tasks" class="tasks_block sortable list ui-sortable" style="display: block;">

    <!-- TASK HEADING ROW -->
    <div id="task_11" class="heading-row task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_11" id="sort_order_11" class="sort_order" size="15" type="hidden" value="1">
        <input name="heading_11" id="heading_11" class="heading" size="15" type="hidden" value="1">
        <input name="name_11" id="name_11" class="task-heading name" size="45" type="text" value="List Heading 1" placeholder="Type a Project Task List Heading Here..." style="cursor: auto; ">
         <br style="clear:both;">
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 2">
        </div>
        <br style="clear:both;">
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 3">
        </div>
        <br style="clear:both;">
    </div>

    <!-- TASK HEADING ROW -->
    <div id="task_11" class="heading-row task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_11" id="sort_order_11" class="sort_order" size="15" type="hidden" value="1">
        <input name="heading_11" id="heading_11" class="heading" size="15" type="hidden" value="1">
        <input name="name_11" id="name_11" class="task-heading name" size="45" type="text" value="List Heading 2" placeholder="Type a Project Task List Heading Here..." style="cursor: auto; ">
         <br style="clear:both;">
    </div>


    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 6">
        </div>
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 7">
        </div>
    </div>


</div>

我想做的是在任务标题行上添加

CTRL+Click

功能，拖动选择器图像，并将其“选择”（添加.select CSS类）添加到该任务标题行下方但在下一个任务标题之前的所有任务行

// select child task under a task row until next task row is reached
if ($(this).parent().hasClass('heading-row'))
{
    if ($(this).parent().hasClass('selected'))
    {
        $(this).parent().nextUntil(".heading-row" ).addClass("selected");
    }else{
        //$(this).parent().nextUntil(".heading-row" ).toggleClass("selected");
        $(this).parent().nextUntil(".heading-row" ).removeClass("selected");
    }
}

由于任务标题行与常规任务记录没有什么不同，因此没有父/子层次结构，这会使事情变得复杂。上面的HTML显示有两个任务标题行。一号和四号

因此，在第一个Tash标题行上按住CTRL键并单击，需要将CSS类

selected

添加到第1、2和3行，以选择任务标题行及其2个“子”行

是否可以选择任务标题行的所有假子任务行

现有功能的演示：

---

更新：

<div id="project_tasks" class="tasks_block sortable list ui-sortable" style="display: block;">

    <!-- TASK HEADING ROW -->
    <div id="task_11" class="heading-row task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_11" id="sort_order_11" class="sort_order" size="15" type="hidden" value="1">
        <input name="heading_11" id="heading_11" class="heading" size="15" type="hidden" value="1">
        <input name="name_11" id="name_11" class="task-heading name" size="45" type="text" value="List Heading 1" placeholder="Type a Project Task List Heading Here..." style="cursor: auto; ">
         <br style="clear:both;">
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 2">
        </div>
        <br style="clear:both;">
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 3">
        </div>
        <br style="clear:both;">
    </div>

    <!-- TASK HEADING ROW -->
    <div id="task_11" class="heading-row task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_11" id="sort_order_11" class="sort_order" size="15" type="hidden" value="1">
        <input name="heading_11" id="heading_11" class="heading" size="15" type="hidden" value="1">
        <input name="name_11" id="name_11" class="task-heading name" size="45" type="text" value="List Heading 2" placeholder="Type a Project Task List Heading Here..." style="cursor: auto; ">
         <br style="clear:both;">
    </div>


    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 6">
        </div>
    </div>

    <div id="task_12" class="task_row">
        <span class="handle" title="Drag and Drop to Reorder Tasks"></span>
        <input name="sort_order_12" id="sort_order_12" class="sort_order" size="15" type="hidden" value="2">
        <div class="task-name-wrap">
            <input class="name" name="name_12" id="name_12" placeholder="Name:" size="45" type="text" value="Task record 7">
        </div>
    </div>


</div>

---

我刚刚遇到了这个jQuery函数，它可能是我的解决方案的票证

我刚刚遇到了这个jQuery函数，在我的情况下，它似乎是一种可行的方法

当按住CTRL键并单击任务标题时，此行选择所有子项

// select child task under a task row until next task row is reached
if ($(this).parent().hasClass('heading-row'))
{
    if ($(this).parent().hasClass('selected'))
    {
        $(this).parent().nextUntil(".heading-row" ).addClass("selected");
    }else{
        //$(this).parent().nextUntil(".heading-row" ).toggleClass("selected");
        $(this).parent().nextUntil(".heading-row" ).removeClass("selected");
    }
}

在此进行工作演示：