1

So I've been trying to do the following bit of code without jQuery:

$(".parent-class").contents().find(".child-class").css("color", "red");

I'm trying to edit the styles of an embedded Twitter feed and I could only do that by getting the module's child nodes using this snippet: $(".twitter-timeline").find(".timeline-Tweet-text").css("margin-bottom", "-10px"); for whatever reason. It is necessary that the pure JS code mimics this functionality. My full js function is:

// Change the style of the tweets after the module loads.
window.addEventListener('load', function () {
   $(".twitter-timeline").contents().find(".timeline-Tweet-text").css("margin-bottom", "-10px");
});

Thanks for taking the time to read.

Nikitas IO
  • 696
  • 5
  • 20
  • 2
    Isn't `$(selector1).contents().find(selector2)` equivalent (in most cases, including here) to `$(selector1).find(selector2)`? Also, that itself is equivalent to (in many cases, including here) `$(selector1 + " " + selector2)`. – VLAZ Apr 08 '20 at 11:13
  • If I remove contents() then the functionality beaks. Not sure why that is. – Nikitas IO Apr 08 '20 at 11:14
  • Didn't the previous [question](https://stackoverflow.com/q/61097074/1823841) solve yuor issue? – palaѕн Apr 08 '20 at 11:15
  • No it did not. In fact, it was requested in my previous question that I specify what I need in more detail in a new question. – Nikitas IO Apr 08 '20 at 11:16
  • @VLAZ I don't think those are equivalent, the OP's example looks for `selector2` inside the first child of the first element that matches `selector1`. – Titus Apr 08 '20 at 11:18
  • 1
    Well, what is the actual HTML you're trying to match, then? Because (unless I'm misreading the docs) `.contents()` will extract the first level of children and `.find()` searches through all descendants, so logically `.contents().find()` should search through all descendants *except* immediate children. – VLAZ Apr 08 '20 at 11:18
  • @Titus you might be right. I read the documentation on [`.contents()`] more than just the first line and now I'm actually more confused than before to what it actually does. I thought that if you had matched `
    ` and called `.contents()` on it you'd get `` but it seems to be doing something different.     – VLAZ Apr 08 '20 at 11:23
  • @VLAZ No, you were right, my assumption was incorrect, both calls seem to return the same number of elements, [a simple test that I've made](https://jsbin.com/kocisicamu/edit?html,js,console) shows that – Titus Apr 08 '20 at 11:28
  • @Titus ah, thanks - I was just about to make a test for myself to verify. I [modified yours](https://jsbin.com/naqeconura/1/edit?html,js,console) and my suspicion is correct `.contents().find()` will act like a normal `.find()` but skip the first level of children. So, unless those need to be eliminated (seems unlikely), then having `.contents()` or not should be identical. – VLAZ Apr 08 '20 at 11:31

1 Answers1

1

You can try the following way:

document.querySelectorAll(".twitter-timeline .timeline-Tweet-text").forEach(function(el){
    el.style.marginBottom = "-10px";
 });
Mamun
  • 66,969
  • 9
  • 47
  • 59
  • 3
    It's the same answer as [this](https://stackoverflow.com/a/61097132/1823841) and OP said that it `No it did not` resolve his issue. – palaѕн Apr 08 '20 at 11:24
  • This might be a bit tricky as Twitter adds so many dynamic contents in their HTML code. Also, they show images using background image url, not all using tags. – palaѕн Apr 08 '20 at 11:31