.css() on DOM element not activating

Question

Been trying for hours, but can't get this to work.

If I go direct

$(.button).click(function(event){
    var graham = window.document.childNodes[1].childNodes[2].childNodes[1].childNodes[9];
    $(graham).css('color', 'red');
)};

But instead of just typing out the DOM node directly, if I cycle it through a loop like:

$(.button).click(function(event) {
  js = (js.slice(0, -1)).split(",");
  for(x = 0; x< js.length; x++) {
      js[x] = "childNodes[" + js[x] + "]";
  }
  js = "window.document." + js.join(".");
    $(js).css('color', 'red');

)};

Nothing happens onclick. Is there something wrong with using 'window.document' as a string and appending it to the childNodes data? I thought this would be straight forward, but can't get it to work!..

Seems like you should be able to easily answer your own question using the developer tools of your favorite browser. Set a breakpoint on the click event handler and step through the code. — Stephen Thomas
– Stephen Thomas, Commented Feb 27, 2014 at 0:16
The problem is that jQuery sees js as a string not an object — Sparkup
– Sparkup, Commented Feb 27, 2014 at 0:32

Sparkup · Accepted Answer · 2014-02-27 00:29:47Z

1

The problem is that jQuery sees js as a string not an object :

This changes the Stackoverflow website <body> to green :

$(window.document.childNodes[1].childNodes[2]).css('background', 'green');

This doesn't :

$('window.document.childNodes[1].childNodes[2]').css('background', 'green');

However this does :

$(eval('window.document.childNodes[1].childNodes[2]')).css('background', 'green');

Try it in your console.

You need to do :

$(eval(js)).css('color', 'red');

answered Feb 27, 2014 at 0:29

Sparkup

3,7522 gold badges38 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Graham T Over a year ago

Perfect! Thank you! I knew it was something simple and stupid related to using strings for the DOM structure. Thanks for taking the time to write out code examples, much appreciated.

clonyx · Accepted Answer · 2014-02-27 00:29:38Z

0

If you are already using jQuery it is not necessary to search nodes with the native NodeList object via childNodes. Just rely on a jQuery selector.

If jQuery is not used, you can rely on native DOM methods such as querySelector, getElementById, getElementsByTagName, getElementsByClassName, etc.

answered Feb 27, 2014 at 0:29

clonyx

112 bronze badges

1 Comment

Graham T Over a year ago

I know. I'm building this piece to handle a universal set of use cases though. I can't assume the element has a class or ID, or any marker. And I also need to target the exact node, not ALL <p>'s, or ALL <a>'s for example

Collectives™ on Stack Overflow

.css() on DOM element not activating

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related