uncaught typeerror: $(...)[0].css is not a function in jQuery

Question

I want to change first li test, but it is giving me typeerror

$("li")[0].css("color", "orange");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li>Candy</li>
  <li>Fruits</li>
  <li>Chocolate</li>
</ul>

$("li")[0] also gives first element, then why can't I use .css() API on $("li")[0] — Rinkal Bhatia
– Rinkal Bhatia, Commented Jul 26, 2020 at 13:41
Because $("li")[0] returns a native HTML element. See my answer for the code example :) — Balastrong
– Balastrong, Commented Jul 26, 2020 at 13:43
$("li")[0] returns the native <li> element which would be identical to document.querySelector('li') BUT native elements don't have a css() method, that is a jQuery object method — charlietfl
– charlietfl, Commented Jul 26, 2020 at 13:43

Balastrong · Accepted Answer · 2020-07-26 13:40:23Z

4

JQuery uses its own structures, so you cannot use square brackets to get the first element and then keep using JQuery instructions as it returns a native HTML element.

You should use .first() instead to get the first element (or .eq(i) to the the i element)

$("li").first().css("color", "orange");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Candy</li>
  <li>Fruits</li>
  <li>Chocolate</li>
</ul>

If you want to mix JQuery with native HTML (not recommended) you could with this:

$("li")[0].style.color = "orange";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Candy</li>
  <li>Fruits</li>
  <li>Chocolate</li>
</ul>

edited Jul 26, 2020 at 13:40

answered Jul 26, 2020 at 13:30

Balastrong

4,4602 gold badges14 silver badges32 bronze badges

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

1 Comment

charlietfl Over a year ago

Your first statement is very misleading as $(selector)[0] does indeed return a native element assuming there is a matching selector

Ketan Vekariya · Accepted Answer · 2020-07-26 13:35:33Z

0

Try with below, please specify 1,2,3,... n number to select specific li element

$( "ul li:nth-child(1)" ).css("color", "orange");

answered Jul 26, 2020 at 13:35

Ketan Vekariya

3722 silver badges12 bronze badges

Comments

Husmukh · Accepted Answer · 2020-11-08 09:19:02Z

-1

This will work...

 var item2 = $( "li.item-2" );
 $( "ul" ).find( item2 ).css( "background-color", "red" );

<ul>
    <li class="item-1">Candy</li>
    <li class="item-2">Fruits</li>
    <li class="item-3">Chocolate</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Nov 8, 2020 at 9:19

Husmukh

765 bronze badges

Collectives™ on Stack Overflow

uncaught typeerror: $(...)[0].css is not a function in jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related