JQuery пройти несколько слоев глубоко, чтобы установить проверенное значение - PullRequest
0 голосов
/ 06 мая 2018

Как мне использовать jQuery для перехода к этому элементу глубоко в моей таблице?

# adminreview> thead> tr> th: nth-child (1)> div> div> div.checkbox-container> div: nth-child (1)> input

и установить проверенное свойство ввода на false?

Я использую этот замечательный плагин filter / sort jQuery (Excel-подобный Bootstrap Table Sorting And Filtering Plugin) на моей таблице. При загрузке я пытаюсь выбрать только одну из опций, Pending, и запускаю jQuery, чтобы отдельно скрывать строки Approved & Denied.

При загрузке все статусы в настоящее время проверяются по умолчанию:

On Load dropdown selected

Цель состоит в том, чтобы только Ожидание проверялось при загрузке:

desired options selected on load

Вот мой стол html. Я знаю, что это связано с обходом DOM и установкой отмеченного значения для Выбрать все, Одобрено и Отказано в ложь, но мне не очень повезло.

Полагаю, мне нужно отредактировать div:nth-child(1) (2) & (3) и использовать .prop('checked', false); Просто не уверен, как углубиться, используя jquery.

HTML (я специально не включил всю таблицу):

<table id="adminreview" class="fbody">
  <thead>
    <tr>
      <th class="apply-filter no-search">Status
      <div class="dropdown-filter-dropdown">
        <div class="dropdown-filter-content" style="display: none;">
          <div class="dropdown-filter-sort">
            <span class="a-to-z" data-column="0" data-index="0">A to Z</span>
          </div>
          <div class="dropdown-filter-sort">
            <span class="z-to-a" data-column="0" data-index="0">Z to A</span>
          </div>
          <div class="checkbox-container">
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all"
            data-column="0" data-index="0" /> Select All</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Approved" checked="checked" class="dropdown-filter-menu-item item" data-column="0"
            data-index="0" /> Approved</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Denied" checked="checked" class="dropdown-filter-menu-item item" data-column="0"
            data-index="0" /> Denied</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Pending" checked="checked" class="dropdown-filter-menu-item item" data-column="0"
            data-index="0" /> Pending</div>
          </div>
        </div>
      </div></th>          
      <th class="apply-filter">Company
      <div class="dropdown-filter-dropdown">
        <div class="dropdown-filter-content" style="display: none;">
          <div class="dropdown-filter-sort">
            <span class="a-to-z" data-column="1" data-index="1">A to Z</span>
          </div>
          <div class="dropdown-filter-sort">
            <span class="z-to-a" data-column="1" data-index="1">Z to A</span>
          </div>
          <div class="dropdown-filter-search">
            <input type="text" class="dropdown-filter-menu-search form-control" data-column="1" data-index="1"
            placeholder="Search" />
          </div>
          <div class="checkbox-container">
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Select All" checked="checked" class="dropdown-filter-menu-item select-all"
            data-column="1" data-index="1" /> Select All</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="ACME Construction Company" checked="checked" class="dropdown-filter-menu-item item"
            data-column="1" data-index="1" /> ACME Construction Company</div>
            <div class="dropdown-filter-item">
            <input type="checkbox" value="Joe&#39;s Concrete" checked="checked" class="dropdown-filter-menu-item item"
            data-column="1" data-index="1" /> Joe&#39;s Concrete</div>
          </div>
        </div>
      </div></th>

Есть другие столбцы с тем же классом, которые я не хочу касаться: other columns

Заранее спасибо!

1 Ответ

0 голосов
/ 06 мая 2018

У вас есть item класс на каждом флажке. Так что вы можете перебрать все узлы и установить checked в false для всех. А потом. Установите checked на true для последнего.

Как

$('.item').each(function() {
  $( this ).prop('checked', false);
});
$('.item').last().prop('checked', true);
...