Question

规则：

必须至少有三个元素并排。

它可以是同一编号的不同颜色，也可以是连续编号的同一颜色。

匹配的内容之间必须有空闲空间。

不起作用的元素应分别添加在末尾。

例如：随机元素：

<ul class="sort">
    <li class="text-primary">6</li>
    <li class="text-danger">6</li>
    <li class="text-primary">9</li>
    <li class="text-danger">1</li>
    <li class="text-success">12</li>
    <li class="text-black">7</li>
    <li class="text-success">10</li>
    <li class="joker">*</li>
    <li class="text-success">9</li>
    <li class="text-danger">7</li>
    <li class="text-primary">11</li>
    <li class="text-black">5</li>
    <li class="text-success">5</li>
    <li class="text-primary">4</li>
    <li class="text-black">4</li>
    <li class="text-danger">12</li>
    <li class="text-black">9</li>
    <li class="text-danger">13</li>
    <li class="text-primary">12</li>
    <li class="text-success">2</li>
    <li class="text-success">6</li>
    <li class="text-success">6</li>
</ul>

需要这样的排序：

1-2-3（文字危险* 3）

1-1-1（文本危险，文本主要，文本成功）

1-2-3-4（文本成功* 4）

不能：

1-1-1（文本成功* 3）

喜欢这个：

<li class="text-success">6</li>
<li class="text-danger">6</li>
<li class="text-primary">6</li>
<li>space</li>
<li class="text-primary">12</li>
<li class="text-danger">12</li>
<li class="text-success">12</li>
<li class="joker">*</li>
<li>space</li>
<li class="text-primary">9</li>
<li>space</li>
<li class="text-primary">11</li>
<li>space</li>
<li class="text-black">9</li>
<li class="text-success">9</li>
<li>space</li>
<li class="text-black">7</li>
<li class="text-danger">7</li>
<li>space</li>
<li class="text-success">5</li>
<li class="text-black">5</li>
<li>space</li>
<li class="text-primary">4</li>
<li class="text-black">4</li>
<li>space</li>
<li class="text-danger">1</li>
<li class="text-success">2</li>
<li class="text-success">6</li>
<li class="text-success">10</li>
<li class="text-danger">13</li>

Answer 1

我已经为该问题写了某种解决方案。首先，我创建了类名和li值的对象数组。
然后我已经根据值对所有数组对象进行了排序。
在已排序的数组上应用条件检查。（我之间没有应用空格，因为我不清楚该逻辑）。

const lis = document.querySelectorAll("li");

const arrPair = [];
lis.forEach(li => {
  var obj = {
    class: li.className,
    value: parseInt(li.innerText)
  }
  arrPair.push(obj);
});


for(var i = 0;i<arrPair.length;i++)
{
  for(var j = 0;j<arrPair.length;j++)
  {
      if(arrPair[i].value <= arrPair[j].value)
      {
        var temp = arrPair[i];
        arrPair[i] = arrPair[j];
        arrPair[j] = temp;
      }
  }
}
var found = [];
for(var i = 0;i<arrPair.length - 2;i++)
{
  if(arrPair[i].value === arrPair[i+1].value && arrPair[i].value === arrPair[i+2].value && arrPair[i].class !== arrPair[i+1].class && arrPair[i].class !== arrPair[i+2].class && arrPair[i+1].class !== arrPair[i+2].class)
  {
    
    var temp = {
      id1: i,
      id2: i+1,
      id3: i+2,
    }
    found.push(temp);
  }
  if(arrPair[i].value + 1 === arrPair[i+1].value && arrPair[i+1].value + 1 === arrPair[i+2].value && arrPair[i].class === arrPair[i+1].class && arrPair[i].class === arrPair[i+2].class)
  {
  console.log("Here");
    var temp = {
      id1: i,
      id2: i+1,
      id3: i+2
    }
    found.push(temp);
  }
}
$('.sort').empty();
found.forEach(item => {
var li = "";
  li = `<li class='${arrPair[item.id1].class}'>${arrPair[item.id1].value}</li>`;
  li = li + `<li class='${arrPair[item.id2].class}'>${arrPair[item.id2].value}</li>`;
  li = li + `<li class='${arrPair[item.id3].class}'>${arrPair[item.id3].value}</li>`;
  
  $('.sort').append(li);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sort">
    <li class="text-primary">6</li>
    <li class="text-danger">6</li>
    <li class="text-primary">9</li>
    <li class="text-danger">1</li>
    <li class="text-success">12</li>
    <li class="text-black">7</li>
    <li class="text-success">10</li>
    <li class="text-success">9</li>
    <li class="text-danger">7</li>
    <li class="text-primary">11</li>
    <li class="text-black">5</li>
    <li class="text-success">5</li>
    <li class="text-primary">4</li>
    <li class="text-black">4</li>
    <li class="text-danger">12</li>
    <li class="text-black">9</li>
    <li class="text-danger">13</li>
    <li class="text-primary">12</li>
    <li class="text-success">2</li>
    <li class="text-success">6</li>
    <li class="text-success">6</li>
</ul>

使用自定义规则对元素进行排序

1 个答案: