根据 id 选择多个元素以获得彼此相邻的最大组答案

【问题标题】：Selecting multiple elements according to ids to get the largest group that are next to one another根据 id 选择多个元素以获得彼此相邻的最大组
【发布时间】：2019-04-11 06:56:13
【问题描述】：

这可能听起来令人困惑-我自己写它时感到困惑哈。所以基本上我有一些 svg 路径，它们都有像 20_11_3 这样的 ID，即 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 中三个可用座位的节点列表。

我想我必须首先使用 querySelector all 选择所有座位。可用座位，然后过滤它们以获得最多 4 个座位的最佳组。真的很难弄清楚如何在不过度设计到死的情况下实现它。

希望这一切都有意义。

【问题讨论】：

组需要相邻吗？？？
它们需要彼此相邻或至少在同一行和块中。
请记住，我想查看整个 svg 以及所有的块和行，并抓住一个拥有最多座位的组。因此，如果不同排有很多可用的单人座位，但在一排有两个旁边可以吃其他的，我想选择两个座位。
如果有 2 个相同大小的组可用？
相同，代码更少.. 稍后再试

标签： javascript html svg frontend custom-data-attribute

【解决方案1】：

使用 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>

【讨论】：

对不起，我想我当时搞砸了 - 是否可以使用标准 id 而不是 data-id 来做到这一点？
@Johnwilliams ：是的，有可能......只需要替换...... Data('id') with attr('id') and data-id^= with id^=
@Johnwilliams : 以前你错过了在这里更新console.log($maxRange.map(function() { return $(this).attr('id'); }).get())