Выбор нескольких элементов в соответствии с идентификаторами, чтобы получить наибольшую группу, которые находятся рядом друг с другом - PullRequest
Новая
       24

Выбор нескольких элементов в соответствии с идентификаторами, чтобы получить наибольшую группу, которые находятся рядом друг с другом

1 голос
/ 11 апреля 2019

Это, наверное, звучит запутанно - я запутал себя, пишу это, ха. Так что в основном у меня есть несколько путей SVG, которые имеют идентификаторы, такие как 20_11_3, который является blockID_rowId_seatId. 

<svg>
  <path class="seat" data-id="20_11_1"></path>
  <path class="seat" data-id="20_11_2"></path>
  <path class="seat is-available" data-id="20_11_3"></path>
  <path class="seat is-available" data-id="20_11_4"></path>
  <path class="seat" data-id="20_11_5"></path>
  <path class="seat" data-id="20_11_6"></path>
  <path class="seat is-available" data-id="20_11_7"></path>

  <path class="seat" data-id="20_12_1"></path>
  <path class="seat" data-id="20_12_2"></path>
  <path class="seat" data-id="20_12_3"></path>
  <path class="seat" data-id="20_12_4"></path>
  <path class="seat is-available" data-id="20_12_5"></path>
  <path class="seat" data-id="20_12_6"></path>
  <path class="seat" data-id="20_12_7"></path>

  <path class="seat" data-id="21_1_1"></path>
  <path class="seat" data-id="21_1_2"></path>
  <path class="seat is-available" data-id="21_1_3"></path>
  <path class="seat is-available" data-id="21_1_4"></path>
  <path class="seat is-available" data-id="21_1_5"></path>
  <path class="seat" data-id="21_1_6"></path>
  <path class="seat" data-id="21_1_7"></path>
</svg>

Мне нужно взять группу мест, у которой больше всего мест рядом с другой. Таким образом, в этом случае выше выбора будет список узлов из трех доступных мест в блоке 21, строка 1.

Полагаю, мне придется начать с выбора всех мест seat.is-available, используя querySelector all, и затем отфильтровать их, чтобы получить лучшую группу из 4 мест. На самом деле изо всех сил пытается выяснить, как это сделать без чрезмерного проектирования до смерти.

Надеюсь, все это имеет смысл.

1 Ответ

1 голос
/ 11 апреля 2019

Используя jQuery, вы можете сделать что-то вроде этого. 

// get first avalable seat
let $ele = $('.seat.is-available:eq(0)');
//  variable for holding largest range collection
let $maxRange;

// iterate until get empty
while ($ele.length) {
  // extract the id prefix
  let prefix = $ele.data('id').substr(0, $ele.data('id').lastIndexOf('_') + 1);

  // set current range as current element
  let $currentRange = $ele;
  // keep a temporary copy for  iterating
  let $tmp = $currentRange;
  // iterate until there is no adjacent availabe seat is there
  while (($tmp = $tmp.next(`[data-id^="${prefix}"].is-available`)).length)
    // add seat eleemnt to current range
    $currentRange = $currentRange.add($tmp);
  // check previous range and current range and update maxrange acconrdingly
  $maxRange = !$maxRange || $currentRange.length > $maxRange.length ? $currentRange : $maxRange;
  // get next available seat
  $ele = $currentRange.last().nextAll('.seat.is-available').first();
}


console.log($maxRange.map(function() { // extract seat ids
  return $(this).data('id');
}).get())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
  <path class="seat" data-id="20_11_1"></path>
  <path class="seat" data-id="20_11_2"></path>
  <path class="seat is-available" data-id="20_11_3"></path>
  <path class="seat is-available" data-id="20_11_4"></path>
  <path class="seat" data-id="20_11_5"></path>
  <path class="seat" data-id="20_11_6"></path>
  <path class="seat is-available" data-id="20_11_7"></path>

  <path class="seat" data-id="20_12_1"></path>
  <path class="seat" data-id="20_12_2"></path>
  <path class="seat" data-id="20_12_3"></path>
  <path class="seat" data-id="20_12_4"></path>
  <path class="seat is-available" data-id="20_12_5"></path>
  <path class="seat" data-id="20_12_6"></path>
  <path class="seat" data-id="20_12_7"></path>

  <path class="seat" data-id="21_1_1"></path>
  <path class="seat" data-id="21_1_2"></path>
  <path class="seat is-available" data-id="21_1_3"></path>
  <path class="seat is-available" data-id="21_1_4"></path>
  <path class="seat is-available" data-id="21_1_5"></path>
  <path class="seat" data-id="21_1_6"></path>
  <path class="seat" data-id="21_1_7"></path>
</svg>

ОБНОВЛЕНИЕ: По вашему запросу, то же самое с атрибутом id. 

// get first avalable seat
let $ele = $('.seat.is-available:eq(0)');
//  variable for holding largest range collection
let $maxRange;

// iterate until get empty
while ($ele.length) {
  // extract the id prefix
  let prefix = $ele.attr('id').substr(0, $ele.attr('id').lastIndexOf('_') + 1);

  // set current range as current element
  let $currentRange = $ele;
  // keep a temporary copy for  iterating
  let $tmp = $currentRange;
  // iterate until there is no adjacent availabe seat is there
  while (($tmp = $tmp.next(`[id^="${prefix}"].is-available`)).length){
    // add seat eleemnt to current range
    $currentRange = $currentRange.add($tmp);
    }
  // check previous range and current range and update maxrange acconrdingly
  $maxRange = !$maxRange || $currentRange.length > $maxRange.length ? $currentRange : $maxRange;
  // get next available seat
  $ele = $currentRange.last().nextAll('.seat.is-available').first();
}


console.log($maxRange.map(function() { // extract seat ids
  return $(this).attr('id');
}).get())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
  <path class="seat" id="20_11_1"></path>
  <path class="seat" id="20_11_2"></path>
  <path class="seat is-available" id="20_11_3"></path>
  <path class="seat is-available" id="20_11_4"></path>
  <path class="seat" id="20_11_5"></path>
  <path class="seat" id="20_11_6"></path>
  <path class="seat is-available" id="20_11_7"></path>

  <path class="seat" id="20_12_1"></path>
  <path class="seat" id="20_12_2"></path>
  <path class="seat" id="20_12_3"></path>
  <path class="seat" id="20_12_4"></path>
  <path class="seat is-available" id="20_12_5"></path>
  <path class="seat" id="20_12_6"></path>
  <path class="seat" id="20_12_7"></path>

  <path class="seat" id="21_1_1"></path>
  <path class="seat" id="21_1_2"></path>
  <path class="seat is-available" id="21_1_3"></path>
  <path class="seat is-available" id="21_1_4"></path>
  <path class="seat is-available" id="21_1_5"></path>
  <path class="seat" id="21_1_6"></path>
  <path class="seat" id="21_1_7"></path>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...