jQuery doesn't get applied. Javascript works fine

Question

What this should do: It adds a Class to the first Child. The second one is just for testing. It should change the background-color of one list-element to red. None of those applies.

clientStuff();
alert("Hi");

function clientStuff(){
  $('.client-unit').first().addClass('active-client');
}

$( "li" ).first().css( "background-color", "red" );

What i've tried:

I checked the linking of the documents. And their order. Here comes the linking:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="styles.css"  rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="script.js"></script>

I checked the semicolons and for spelling mistakes.
I asked mighty Cthulu for help. He said "no."

Does anyone have an idea?

...And have you defined $. Also, mighty Cthulu requires a sacrificial offering from you first before consenting to offer any assistance. — UncaughtTypeError
– UncaughtTypeError, Commented Jul 21, 2017 at 11:53

Atlas_Gondal · Accepted Answer · 2017-07-21 11:55:01Z

1

Try something like:

$(function(){

  var $li = $('ul li').click(function() {
    $li.removeClass('selected');
    $(this).addClass('selected');
  });

});

li.selected {
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

Try this, If you need to select only first child:

$('ul li:first')

answered Jul 21, 2017 at 11:55

Atlas_Gondal

2,5622 gold badges17 silver badges25 bronze badges

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

Comments

Puja · Accepted Answer · 2017-07-21 12:00:24Z

1

Check this, I Hope its helpful to you

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
     <link href="styles.css"  rel="stylesheet" type="text/css">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
     <script src="script.js" type="text/javascript"></script>

In script.js file like that below :

$(document).ready(function() {
     alert("Hi");
     clientStuff();
     $( "li" ).first().css( "background-color", "red" );

});
function clientStuff(){
    $('.client-unit').first().addClass('active-client');
}

answered Jul 21, 2017 at 12:00

Puja

4612 gold badges6 silver badges21 bronze badges

1 Comment

R. Filatow Over a year ago

I'd like to give you a brofirst and a cookie. It works. Thank you very much :)

Najam Us Saqib · Accepted Answer · 2017-07-21 11:54:41Z

0

$( "li" ).first().css({"background-color": "yellow"});

answered Jul 21, 2017 at 11:54

Najam Us Saqib

3,4411 gold badge29 silver badges49 bronze badges

Comments

ansarhusain · Accepted Answer · 2017-07-21 12:09:41Z

0

Since You are using Jquery.

so use like that code it will work.

    jQuery(function(){
      $('.client-unit').first().addClass('active-client');
      $('li').first().css("background-color","red");
    });

answered Jul 21, 2017 at 12:09

ansarhusain

11 bronze badge

Comments

Glorfindel · Accepted Answer · 2023-02-17 09:06:43Z

0

Actually first() attribute does not apply to child attributes rather it applies to first of it's own kind,

Therefore the first() searches for first element which has class client-unit and applies class to that,

Here is the sample screenshot of the output :

Also here is the Codepen of your code, with sample HTML from my side,

https://codepen.io/shohil06/pen/ZJzEJj

Hope it helps !

Thank You

edited Feb 17, 2023 at 9:06

Glorfindel

22.8k13 gold badges97 silver badges124 bronze badges

answered Jul 21, 2017 at 12:05

SHOHIL SETHIA

2,2372 gold badges19 silver badges26 bronze badges

1 Comment

Glorfindel Over a year ago

Please edit the externally hosted code into the post; doing so will make sure it remains useful even if the link breaks. My script is not allowed to do this because of potential licensing problems.

Collectives™ on Stack Overflow

jQuery doesn't get applied. Javascript works fine

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related