jQuery没有得到应用。 Javascript工作正常

Question

这应该做什么：它为第一个Child添加了一个Class。第二个仅用于测试。它应该将一个list-element的背景颜色更改为红色。 这些都不适用。

clientStuff();
alert("Hi");

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

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

我尝试了什么：

1. 我检查了文件的链接。和他们的订单。这是链接：

<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>

1. 我检查了分号和拼写错误。
2. 我向强大的Cthulu寻求帮助。他说＆＃34;没有。＆＃34;

有没有人有想法？

Answer 1

$（“li”）。first（）。css（{“background-color”：“yellow”}）;

Answer 2

尝试类似：

$(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>   

试试这个，如果你需要只选择第一个孩子：

$('ul li:first')

Answer 3

检查一下，我希望它对您有所帮助

 <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>

在下面的script.js文件中：

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

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

Answer 4

实际上 first（）属性不适用于子属性，而是适用于它自己的第一种，

因此 first（）会搜索第一个元素，该元素具有类 客户端单元并将类应用于该

以下是输出的示例屏幕截图：

此处还有您的代码的Codepen，以及我身边的示例HTML

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

希望它有所帮助！

谢谢

Answer 5

因为你正在使用Jquery。

所以请使用相似的代码。

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