主页 / 问题 / 1249596
Accepted
Oiki
Asked:2022-02-28 06:29:21 +0000 UTC2022-02-28 06:29:21 +0000 UTC

如何缩短代码并明确定位？

  • 772

我有

<div class="sl-ide">
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
ТАКИХ БЛОКОВ МНОГО
         <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
        <div class="itek"></div>
    </div>

我将这些脚本分组到具有不同编号
选项 1的不同块中

let items = $(".sl-ide");
items.slice(0,5).wrapAll('<div class="red">');     
items.slice(5,8).wrapAll('<div class="red">');
items.slice(8,10).wrapAll('<div class="red">');
а таких строк много

我认为重复这句话五次……十次是愚蠢的……


选项 2
或这里是另一个选项，但它长了几行

const items = [...document.querySelectorAll('.itek')];
const sections = [[0, 5], [5, 8], [8, 10]];

sections.forEach((section, i) => {
  const div = document.createElement('div');
  div.className = `div${i}`;
  document.querySelector('.sl-ide').append(div);
  div.append(...items.slice(...section));
});

我需要为块组设置相同的包装器（样式），我对 div.className = `div${i}`; 为每个组设置单独样式的行感兴趣，我编写div.className = `mydivstyle`; 并得到我需要的东西 - 所有组的样式相同......
但是
也许有一个更简单的解决方案——类似的东西（这不起作用）

items.slice [[0, 5], [5, 8], [8, 10]].wrapAll('<div class="mydivstyle">');

这样它就可以在“全局”div中运行<div class="sl-ide">

javascript

1 个回答

  1. Best Answer

    小代码并不总是好的:) 但是，

    [0, 5], [5, 8], [8, 10]简化为 → [0, 5, 8]，在每次迭代时，您可以获取数组的当前元素和第i + 1-th，将获得相同的对。

    应该注意的是，在最后一次迭代中，i + 1第 - 个元素将是undefined.
    .slice(8, undefined)是等价.slice(8)的并给出从 8 到结尾的元素. 所以这不是一个错误，这是一个功能！

    let items = $(".itek");
let cut = [0, 5, 8];

cut.forEach((point, i) => {
  items.slice(point, cut[i + 1]).wrapAll('<div class="red">')
});
    .itek {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #800;
  margin: 4px 4px 0 0;
}

.red {
  border-bottom: 3px solid #c00;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="sl-ide">
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
  <div class="itek"></div>
</div>

    好吧，如果您从事运动代码减少...

    [0, 5, 8].map((e, i, a) => $(".itek").slice(e, a[++i]).wrapAll('<div class="red">'));

    • 2

相关问题