根据ids选择多个元素,得到相邻的最大组
Selecting multiple elements according to ids to get the largest group that are next to one another
这听起来可能令人困惑 - 我自己写的时候也很困惑哈。所以基本上我有一些 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 选择所有 seat.is 可用的座位,然后过滤它们以获得最多 4 个座位的最佳组。真的很难弄清楚如何在不过度设计它的情况下解决它。
希望这一切都有意义。
使用 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>
这听起来可能令人困惑 - 我自己写的时候也很困惑哈。所以基本上我有一些 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 选择所有 seat.is 可用的座位,然后过滤它们以获得最多 4 个座位的最佳组。真的很难弄清楚如何在不过度设计它的情况下解决它。
希望这一切都有意义。
使用 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>