jquery - Click+CTRL key to select a row and then add a CSS class to all rows below it until a row with another CSS class is found with JavaScript -

i have javascript app has project task records allow drag , drop reposition there sort order.

this long detailed post code , demo. question @ bottom...

there 2nd type of task record acts dummy task list heading can drag , drop list heading records in between tasks separate , create more organized task lists.

this screenshot shows little bit of of click , drag , drop features include:

• single click on task row drag handle adds .selected css class row changes background color show "selected". once task row selected can click , hold on drag handle while dragging row new position vertically.
• holding down ctrl keyboard key while clicking task row drag handle allows select multiple rows. once have more 1 row selected, can click , drag , drop multiple rows new sort order position.
• after 1 or more rows selected, clicking other drag handle de-select rows , select 1 clicked on. unless hold ctrl key down multi-selection feature.
• dragging tsk header row or row matter allows organize order create task lists

---

demo http://jsfiddle.net/jasondavis/xhmb2ba1/

---

---

javascript - adds drag , drop + click select multiple rows

// handle project task drag , 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 prevent accidental drag when trying 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);   }); } 

html structure

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

---

question: new click select task in task list feature:

what add capability ctrl + click on task heading row drag picker image , have "select" (add .select css class) task rows below task heading row before next task heading.

since task heading row no different regular task record, there no parent/child hierarchy complicates things. html above shows there 2 task heading rows. 1st , 4th.

so ctrl+click on 1st tash heading row need add css class selected row 1, 2, , 3 select task heading row plus 2 "child" rows.

is possible select fake child task rows of task heading row?

demo of existing functionality: http://jsfiddle.net/jasondavis/xhmb2ba1/

---

update:

i came across jquery function https://api.jquery.com/nextuntil/ might ticket solution

i came across jquery function https://api.jquery.com/nextuntil/ seems way go in situation.

this line selects child items when ctrl+clicking task heading.

// select child task under task row until next task row 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");     } } 

working demo here: http://jsfiddle.net/jasondavis/xhmb2ba1/8/