add style to ALL child elements using plain javascript (multiple containers)

Question

What i need is a different el.style.height depends on amount of child nodes.. So for example in a second div with class links -> a tags should have style="height: 100px"; I have build this:

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>

As you may see it works because im targeting only first child node here. But as soon as im trying add additional for cycle in order to go through all a tags -> it does not work.. What would be the right syntax in this specific case? Im sure that there should be 2 for cycles. But i think that i just cant get "ALL children" right..

PS: IE 11 support is required

Do you have to do this with javascript? Why not use a static CSS? This is after all what CSS is intended for. — Olian04, Dec 15 '19 at 03:38
yeah. and i would love to use CSS. It would be 2 min fix. But i cant (in this specific case). — , Dec 15 '19 at 03:40
because i have not just 3 divs. Lets say that divs amount is somewhere around 50 + they have different amount of links each time when page is recreated (new data was added - old data removed). So for you page can show first div with 3 links (in this period of time). But for someone else first div will contain 5 links. — , Dec 15 '19 at 03:44
What logic do you have for determining which "links" div should have what styles? — Olian04, Dec 15 '19 at 03:49
I'm still a little confused about what your expected output is. You can possibly consider using a more specific selector in `querySelectorAll()`. I created a [code snippet](https://jsfiddle.net/khan_y/2c0es75m/8/) where I revised your function to select all links. — khan, Dec 15 '19 at 03:50

Olian04 · Answer 1 · 2019-12-15T04:04:38.060

I'm assuming the only logic determining if the children of a div should be styled, is the number of children of that div. If that's the case then you could use this trick i found in another SO question about selecting elements based on their children.

The solution is just a slightly complex CSS selector. No javascript required.

And it works in IE11, see 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>

Michael Rodriguez · Accepted Answer · 2019-12-15T03:54:32.323

You could do it like this:

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>

Without 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>

my bad..IE 11 support is required.... forEach does not work in IE11 But you solution is great. — , Dec 15 '19 at 03:51
Ah no problem! I've updated my answer. I changed the original to forEach because I just think it looks cleaner. — Michael Rodriguez, Dec 15 '19 at 03:55

add style to ALL child elements using plain javascript (multiple containers)

2 Answers2