Question

我需要的是不同的el.style.height，它取决于子节点的数量。因此，例如，在具有类链接的第二个div中，>标签应具有style =“ height：100px”; 我已经建立了：

function sameHeightLinks() {
  var linkContainers = document.querySelectorAll('.links');
  for (var i = 0; i < linkContainers.length; i++) {
    var linkContainer = linkContainers[i];
    var linkItself = linkContainer.children[0];
    var linksAmount = linkContainer.childElementCount;
    if (linksAmount == 2) {
      linkItself.style.height = '59.5px';
    }
  }
}
sameHeightLinks();

<div class="links">
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
</div>
<div class="links">
  <a>Some link</a>
  <a>Some link</a>
</div>
<div class="links">
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
</div>

您可能会看到它起作用的原因，因为我在此处仅定位了第一个子节点。但是，一旦我试图添加额外的周期，以便通过所有标签->它不起作用。在这种特定情况下，正确的语法是什么？我确定应该有2个周期。但是我认为我无法正确对待“所有孩子”。

PS：需要IE 11支持

Answer 1

您可以这样做：

function sameHeightLinks() {
  const linkContainers = document.querySelectorAll('.links');
  linkContainers.forEach(container => {
    if (container.childElementCount === 2) {
      for (let i=0; i < container.children.length; i++) {
        container.children[i].style.height = '59.5px';
      }
    }
  });
}
sameHeightLinks();

<div class="links">
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
</div>
<div class="links">
  <a>Some link</a>
  <a>Some link</a>
</div>
<div class="links">
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
</div>

没有forEach：

function sameHeightLinks() {
  const linkContainers = document.querySelectorAll('.links');
  for (let i=0; i < linkContainers.length; i++) {
    const container = linkContainers[i];
    if (container.childElementCount === 2) {
      for (let i=0; i < container.children.length; i++) {
        container.children[i].style.height = '59.5px';
      }
    }
  }
}
sameHeightLinks();

<div class="links">
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
</div>
<div class="links">
  <a>Some link</a>
  <a>Some link</a>
</div>
<div class="links">
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
</div>

Answer 2

我假设确定div子级样式的唯一逻辑是该div的子级数。如果是这种情况，那么您可以使用我在another SO question中发现的有关根据子元素选择元素的技巧。

解决方案只是一个稍微复杂的CSS选择器。不需要javascript。

它在IE11中有效，请参见first-child，nth-last-child，Child combinator和General sibling combinator

.links > a:first-child:nth-last-child(2),
.links > a:first-child:nth-last-child(2) ~ a {
    height: 59.5px;
}

<div class="links">
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
</div>
<div class="links">
  <a>Some link</a>
  <a>Some link</a>
</div>
<div class="links">
  <a>Some link</a>
  <a>Some link</a>
  <a>Some link</a>
</div>

使用普通javascript（多个容器）向所有子元素添加样式

2 个答案: