5 ms·

That's actually a good example. My gut feeling was simply to write the following. document.getElementsByClassName("my-class")[0].style.display = 'block'; The

• collinmanderson 9y ago
  Right, and that still doesn't handle applying the action to all _all_ items of that class. It would need to be something like this, though it still doesn't automatically handle inline vs block: document.querySelectorAll('.my-elements').forEach(function(el){el.style.display = 'block'}) And apparently there are issues even with that: https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ https://css-tricks.com/snippets/javascript/loop-queryselecto...
  • exizt88 9y ago
    For reference, this is how you do this in jQuery: $('.my-elements').show()
    • deleted 9y ago
      [deleted]
  • kibibu 9y ago
    Ok, I kinda got sniped on this. Here's a first pass at a micro lib to do it using Proxy object: const $ = (() => { function listProxy(arr) { return new Proxy(arr, { set: (t, p, v, r) => { for(let x of t) { x[p] = v; } }, get: (t, p, r) => { if(t.length > 0 && t[0][p] instanceof Function) { return (...args) => { Array.prototype.map.call(t, (x) => x[p](args)) }; } else { return listProxy( Array.prototype.map.call(t, (x) => x[p]) ); } } }) } return (sel, root) => { if(root === undefined) root = document; return listProxy(root.querySelectorAll(sel)); } })(); // use like this: $('.my-elements').className = 'Important'; $('.my-elements').style.color = 'Red'; $('.my-elements').classList.add('Another'); demo: https://codepen.io/anon/pen/RxGgNR https://codepen.io/anon/pen/RxGgNR
• drinchev 9y ago
  In this specific case jQuery's `show` is just giving you a shortcut to show/hide arbitrary elements. Try doing this with CSS, please. <div class="element"></div> .element { display: block; } .element.is-hidden { display: none; } document.getElementsByClassName("element")[0].classList.add( "is-hidden" ); You should never ask yourself "How can I accomplish that without jQuery", but rather "What would be the best way to do it!"
• bijection 9y ago
  To make that work for all elements of that class, you could rewrite it as document.querySelectorAll('.myclass') .forEach(el => el.style.display = 'block') The jQuery is still shorter, but the vanilla js is definitely manageable.
  • no_gravity 9y ago
    Unfortunately, querySelectorAll returns a NodeList, not an Array. So you cannot use forEach() on it.
    • hawkice 9y ago
      NodeList also implements forEach: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach https://developer.mozilla.org/en-US/docs/Web/API/NodeList/fo...
      • collinmanderson 9y ago
        It's a very recent addition. IE11 doesn't have it for sure.
      • no_gravity 9y ago
        Not in Edge though.
        • hawkice 9y ago
          The page I linked has a compatibility chart that says Edge 16 has it (no idea if that's a planned release, haven't ever used Edge).
          • darepublic 9y ago
            You can use Array.prototype.forEach.call(nodelist, fn), or Arrays.from(nodelist).forEach
            • 9y ago
• taco_emoji 9y ago
  It's like a corollary to Greenspun's Tenth Rule [0], in that anytime I try to do something in vanilla JS, I just end up poorly re-inventing half of JQuery just to do it. [0] https://en.wikipedia.org/wiki/Greenspun%27s_tenth_rule https://en.wikipedia.org/wiki/Greenspun%27s_tenth_rule
  • franciscop 9y ago
    I ended up reinventing most of jQuery: https://umbrellajs.com/ https://umbrellajs.com/ But it was fun and I learned a lot, so there is that.
• aplummer 9y ago
  This comment is actually a fantastic example of why jQuery is so popular. Missing:
• krapp 9y ago
  Unfortunately, document.getElementsByClassName isn't universally supported[0], so even if you wanted to do it that way, it still wouldn't be that easy. Never is. [0]https://caniuse.com/#feat=getelementsbyclassname https://caniuse.com/#feat=getelementsbyclassname