I want to change the class of a particular element, can you please tell me why my code is not working?

Question

I want to change the class of a particular <li></li> element and I found a few ways to do so, but non of them worked, can you please tell me the reason why my code is not working >

<script type="text/javascript">
        $('.header a[href="register_friend.php"]').parent().setAttribute("class", "active");
    </script>

<header class="header" >
    <nav><ul>
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="register_friend.php">Register a friend</a></li>
            <li><a href="">Register Yourself</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="index.html">Rate</a></li>
        </ul>
    </nav>
</header>

I would like to add that I am using an external header, if that brings any change.

<body >
<div id="header"></div>

</body>

`setAttribute()` is a plain vanilla JS method and you're trying to use it on a jQuery object — j08691, Jun 22 '17 at 20:02
Adding onto what @selten98 said, I think it's important to explain _why_. Your javascript is executing before your class `header` is loaded, therefore, it can't act on the class because it doesn't exist yet. — GrumpyCrouton, Jun 22 '17 at 20:04
@j08691 unfortunately there is no error in the console, that's the main problem :P — Habib Ansari, Jun 22 '17 at 20:13
If you include jQuery and load the script properly, it works fine https://jsfiddle.net/j08691/zdrnqojc/ — j08691, Jun 22 '17 at 20:18
What do you mean by "external header"? Are you injecting the `
` html after page load? If so, you need to make sure you're running this code after the DOM you're trying to modify has already been injected. — Daniel Beck, Jun 22 '17 at 20:22

Vishal Anand · Answer 1 · 2017-06-22T20:13:55.607

1

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    $('.header a[href="register_friend.php"]').parent().addClass("active");
  });
</script>

Look for addClass in API documentation https://api.jquery.com/addClass/

https://codepen.io/codingonHP/pen/OggeJb

wrt to addEventListner : https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded and for IE: addEventListener not working in IE8

edited Jun 22 '17 at 20:13

answered Jun 22 '17 at 20:02

Vishal Anand

1,431
1
15
32

didn't work, also tried the addClass() function, is there some other way? :( – Habib Ansari Jun 22 '17 at 20:06
post your code again what you are running. Yes, the codepen link https://codepen.io/codingonHP/pen/OggeJb is working. – Vishal Anand Jun 23 '17 at 04:53

score 0 · Answer 2 · answered Jun 22 '17 at 20:09

0

Try wrap your script in this way:

$(document).ready(function(){
     // Note:jquery use 'attr', instead of 'setAttribute' to set attribute.
    $('.header a[href="register_friend"]').parent().attr("class", "active");
})

answered Jun 22 '17 at 20:09

miao.wang

64
1
9

Daniel Beck · Answer 3 · 2017-06-22T20:27:55.700

You either need to get the DOM node itself, so you can use the native setAttribute, or else use the jQuery .attr() on the jQuery object. Either of these will work (assuming the DOM nodes exist at the time the script is run -- do usual document.ready dance if necessary.)

// use the DOM node:
$('.header a[href="register_friend.php"]').parent()[0].setAttribute("class", "active");

// or use the jQuery object:
$('.header a[href="register_friend.php"]').parent().attr("class", "active");

.active {
  border: 1px solid #F00
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="register_friend.php">Register a friend</a></li>
      <li><a href="">Register Yourself</a></li>
      <li><a href="">Contact</a></li>
      <li><a href="index.html">Rate</a></li>
    </ul>
  </nav>
</header>

If you know there will only be one matching element, those methods are equivalent. If you need to be able to handle more than one matching element, use the jQuery .attr() method which will apply to all nodes within the set.

(...but with that said, .addClass() is probably a safer choice than setting the class directly with .attr() or .setAttribute(), because the latter two will overwrite any the other classnames presently on the element.)

score 0 · Answer 4 · answered Jun 22 '17 at 20:23

First you should use addClass, not set the attribute.

Apart from that you should wrap the jQuery function into $(document).ready(function() { ... }) if you want this to happen on page load:

$(document).ready(function() {
        $('.header a[href="register_friend.php"]').parent().addClass("active");
});

.active {
border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header" >
    <nav><ul>
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="register_friend.php">Register a friend</a></li>
            <li><a href="">Register Yourself</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="index.html">Rate</a></li>
        </ul>
    </nav>
</header>

I want to change the class of a particular element, can you please tell me why my code is not working?

4 Answers4