jQuery可选择不将类插入所有子类中

Question

感谢您的帮助。下面的代码是表的一部分。我在表行上有Selectable设置，因此它允许td是可选的，并且可以正常工作。.正如您所注意到的，jQuery Selectable向所有内容中添加了一个类...我不希望这样做，因为我希望能够取消选择选择td。根据我点击的TD。我可能只是取消选择了td，但是子对象仍然突出显示

$("tr.schedule__row").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable({

});

/*Stop from selecting the first column*/

.scheduleTableActual tbody td:first-child {
  pointer-events: none;
}

.ui-selected {
  background: #F39814 !important;
  color: white !important;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="scheduleTable" class="scheduleTableActual">

  <thead class="scheduleHeader">
    <tr class="scheduleHeader__row">
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Sessions</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Mon 06/25</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Tue 06/26</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Wed 06/27</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Thu 06/28</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Fri 06/29</div>
      </th>
    </tr>
  </thead>
  <tbody class="schedule__body">
    <tr class="schedule__row" id="172">
      <td class="schedule__cell schedule__session">
        <div class="schedule__cell--wrap"><span class="schedule__session--title">Session 1</span><span class="schedule__session--time">8:00 AM - 11:00 AM</span></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/25/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="172" data-instanceid="571" data-instancedate="06/25/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="172" data-instanceid="572" data-instancedate="06/25/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="172" data-instanceid="573" data-instancedate="06/25/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/26/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="172" data-instanceid="306" data-instancedate="06/26/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="172" data-instanceid="307" data-instancedate="06/26/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/27/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="172" data-instanceid="338" data-instancedate="06/27/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="172" data-instanceid="339" data-instancedate="06/27/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="172" data-instanceid="340" data-instancedate="06/27/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/28/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="172" data-instanceid="308" data-instancedate="06/28/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="172" data-instanceid="309" data-instancedate="06/28/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/29/2018" class="schedule__cell--wrap"><input data-testid="46185" data-sessionid="172" data-instanceid="576" data-instancedate="06/29/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
    </tr>
    <tr class="schedule__row" id="173">
      <td class="schedule__cell schedule__session">
        <div class="schedule__cell--wrap"><span class="schedule__session--title">Session 2</span><span class="schedule__session--time">12:00 PM - 3:00 PM</span></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/25/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="173" data-instanceid="310" data-instancedate="06/25/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="173" data-instanceid="311" data-instancedate="06/25/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/26/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="173" data-instanceid="341" data-instancedate="06/26/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="173" data-instanceid="342" data-instancedate="06/26/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="173" data-instanceid="343" data-instancedate="06/26/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/27/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="173" data-instanceid="312" data-instancedate="06/27/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="173" data-instanceid="313" data-instancedate="06/27/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/28/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="173" data-instanceid="344" data-instancedate="06/28/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="173" data-instanceid="345" data-instancedate="06/28/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="173" data-instanceid="346" data-instancedate="06/28/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/29/2018" class="schedule__cell--wrap"><svg data-instancedate="06/29/2018" class="schedule__cell--icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"><path fill="currentColor" d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zm2-18V8a2 2 0 1 0-4 0v6H8a2 2 0 1 0 0 4h6v6a2 2 0 1 0 4 0v-6h6a2 2 0 1 0 0-4h-6z"></path></svg></div>
      </td>
    </tr>
  </tbody>
</table>

https://codepen.io/54696d20/pen/EGPjag

您可以在代码笔上看到我的意思。单击，拖动（就像您要突出显示的所有内容），然后单击每个。我会注意到单词仍然突出显示。这会导致Selectable的未选择方法出现问题

Answer 1

我总是这样做，但是我有答案。我在所选方法中添加了一些代码

$("tr.schedule__row").bind("mousedown", function(e) {
  e.metaKey = true;
}).selectable({
   selected: function (event, ui) {
        $('div.schedule__cell--wrap').removeClass("ui-selected");
        $('div.schedule__cell--wrap > span.ui-selectee').removeClass("ui-selected");
        $('div.schedule__cell--wrap > br').removeClass("ui-selected");
    },
});

/*Stop from selecting the first column*/

.scheduleTableActual tbody td:first-child {
  pointer-events: none;
}

.ui-selected {
  background: #F39814 !important;
  color: white !important;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="scheduleTable" class="scheduleTableActual">

  <thead class="scheduleHeader">
    <tr class="scheduleHeader__row">
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Sessions</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Mon 06/25</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Tue 06/26</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Wed 06/27</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Thu 06/28</div>
      </th>
      <th class="scheduleHeader__item schedule__session">
        <div class="scheduleHeader__item--wrap">Fri 06/29</div>
      </th>
    </tr>
  </thead>
  <tbody class="schedule__body">
    <tr class="schedule__row" id="172">
      <td class="schedule__cell schedule__session">
        <div class="schedule__cell--wrap"><span class="schedule__session--title">Session 1</span><span class="schedule__session--time">8:00 AM - 11:00 AM</span></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/25/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="172" data-instanceid="571" data-instancedate="06/25/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="172" data-instanceid="572" data-instancedate="06/25/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="172" data-instanceid="573" data-instancedate="06/25/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/26/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="172" data-instanceid="306" data-instancedate="06/26/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="172" data-instanceid="307" data-instancedate="06/26/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/27/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="172" data-instanceid="338" data-instancedate="06/27/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="172" data-instanceid="339" data-instancedate="06/27/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="172" data-instanceid="340" data-instancedate="06/27/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/28/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="172" data-instanceid="308" data-instancedate="06/28/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="172" data-instanceid="309" data-instancedate="06/28/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="172" data-instancedate="06/29/2018" class="schedule__cell--wrap"><input data-testid="46185" data-sessionid="172" data-instanceid="576" data-instancedate="06/29/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
    </tr>
    <tr class="schedule__row" id="173">
      <td class="schedule__cell schedule__session">
        <div class="schedule__cell--wrap"><span class="schedule__session--title">Session 2</span><span class="schedule__session--time">12:00 PM - 3:00 PM</span></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/25/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="173" data-instanceid="310" data-instancedate="06/25/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="173" data-instanceid="311" data-instancedate="06/25/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/26/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="173" data-instanceid="341" data-instancedate="06/26/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="173" data-instanceid="342" data-instancedate="06/26/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="173" data-instanceid="343" data-instancedate="06/26/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/27/2018" class="schedule__cell--wrap"><input data-testid="46182" data-sessionid="173" data-instanceid="312" data-instancedate="06/27/2018" type="hidden"><span>English I</span><br><input data-testid="46183" data-sessionid="173" data-instanceid="313" data-instancedate="06/27/2018" type="hidden"><span>English II </span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/28/2018" class="schedule__cell--wrap"><input data-testid="46181" data-sessionid="173" data-instanceid="344" data-instancedate="06/28/2018" type="hidden"><span>Algebra I</span><br><input data-testid="46184" data-sessionid="173" data-instanceid="345" data-instancedate="06/28/2018" type="hidden"><span>Biology</span><br>
          <input
            data-testid="46185" data-sessionid="173" data-instanceid="346" data-instancedate="06/28/2018" type="hidden"><span>U.S. History</span><br></div>
      </td>
      <td class="schedule__cell">
        <div data-sessionid="173" data-instancedate="06/29/2018" class="schedule__cell--wrap"><svg data-instancedate="06/29/2018" class="schedule__cell--icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32"><path fill="currentColor" d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zm2-18V8a2 2 0 1 0-4 0v6H8a2 2 0 1 0 0 4h6v6a2 2 0 1 0 4 0v-6h6a2 2 0 1 0 0-4h-6z"></path></svg></div>
      </td>
    </tr>
  </tbody>
</table>