Question

我有一个运行大约30-40次的函数，这有助于我在某些布局中添加某个类，如果满足条件的话。不幸的是，事实证明它对于手机的CPU来说有点害怕：

function addClassOnRequirement(target_div, target_div_unpacked, class_to_add, cols) {

    var len_list = $(target_div).length;

    // If layout has 2 columns
    if(cols === 2) {
        // If the layout has an odd number of items, add the said class.
        if (len_list % 2 === 1) {
            $(target_div_unpacked).addClass(class_to_add);
        }
        // If layout has 3 columns
    } else if(cols === 3) {
        // If the layout's number of items (3 on each row) has the number ~5 or so
        // add this class. If 2 rows, 3 items on first row, 2  items on 
        // second row exist, there
        // should be 6, so add this class to do some CSS jumble since 
        // they're 5.
        if (((len_list - 2) % 3) === 0) {
            $(target_div_unpacked).addClass(class_to_add);
        }
    }
}

target_div 代表布局<ul>的选择器。

target_div_unpacked 代表＆＃34; pure＆＃34;选择器，没有标签，如＆＃34; ul＆＃34;

class_to_add 表示要添加到target_div_unpacked的类的名称

cols 表示我必须添加的cols数。

所有这些都是硬编码的，不是从其他函数生成的，完全是这样的：

addClassOnRequirement(".posts-layout3 li", ".posts-layout3", "col-3-last2-child-50-width", 3);

在一个布局中，它必须得到一个有很多孩子的大<ul>的长度，例如：

<ul class="layout-to-test">
    <li></li>
    <li></li>
    <li></li>
    ..
    ..
    <li></li>
</ul>

情况变得更糟，因为它必须遍历所有，获得长度等等。

这是我为优化所遵循的内容：

使用if - else if因为只有两种情况，精确非范围案件。（切换3-10个案例）。
使用减法而不是添加

不幸的是，似乎无论如何，这个功能仍然会堵塞。我该如何改进？

Answer 1

我不确定我是否正确理解了您的问题，但如果该类具有与Y = nan(m,m); for i = 1:1:m for j = i:1:m subset = intersect(find(~isnan(X(:,i))),find(~isnan(X(:,j)))); Y(i,j) = corr(X(subset,i),X(subset,j)); end end匹配的特定数量的子项，则此函数应该将类添加到容器中。它也应该是高性能的。

childSelector

// add  some lists to the dom
function setUp(lists, elementsPerList) {
  var fragment = document.createDocumentFragment();
  for(var i = 0; i < lists; ++i) {
    let list = document.createElement('ul');
    list.classList.add('test-layout');
    for(var j = 0; j < elementsPerList; ++j) {
      var element = document.createElement('li');
      element.textContent = 'list item ' + i + '.' + j;
      list.appendChild(element);
    }
    fragment.appendChild(list);
  }
  document.body.appendChild(fragment);
}
setUp(200, 11);
// add a button to run the function
document.getElementById('test').addEventListener('click', function() { addClassOnRequirement('li', '.test-layout', 'test', 3) })
// relevant part
function addClassOnRequirement(childSelector, containerSelector, klass, cols) {
    if(cols !== 2 && cols !== 3) return;
    var containers  = document.querySelectorAll(containerSelector);

    for(var i = 0; i < containers.length; ++i) {   
      var container = containers[i];
      var children = container.querySelectorAll(childSelector);
      if(children.length % cols !== 0) {
        container.classList.add(klass);
      }
    }
}

.test {
  background: red;
  opacity: .5;
  width: 50%;
}

Answer 2

您的问题是否需要特殊规则，具体取决于多列列表中的列表项是否过少？

如果是这样，解决这个问题的最有效方法就是没有javascript。你可以用css解决这个问题：

.three-col-list li {
  width: 32%;
  display: inline-block;
}

.three-col-list li:nth-child(3n + 2):nth-last-child(1) {
    background: gray;
}

<p>List 1</p>
<ul class="three-col-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<p>List 2</p>
<ul class="three-col-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<p>List 3</p>
<ul class="three-col-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

如何重新编写此功能的比较和方法以提高效率？

2 个答案: