Question

我希望使用html jquery向其中的最后一个img元素的className添加active

下面我在HTML和jquery中有一些元素：

function initialSteps() {
  $(".row").find("column:last").find("img:first").className += " active";
  // this does not work either
  //$(".row").find("column:last").find("demo cursor:last").className += " active";

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="column">
    <img class="demo cursor" src="img00.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img01.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img02.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img03.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img04.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img05.jpg">
  </div>
</div>

但是，它不起作用。有人可以告诉我我做错了什么吗？

Answer 1

尝试用.column代替column和addClass()

$(".row").find(".column:last").find("img:first").addClass("active")

.active {
  border: 3px solid red;
}

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

<div class="row">
  <div class="column">
    <img class="demo cursor" src="img00.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img01.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img02.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img03.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img04.jpg">
  </div>
  <div class="column">
    <img class="demo cursor" src="img05.jpg">
  </div>
</div>

Answer 2

您可以尝试以下代码

<!DOCTYPE html>
<html>
<head>
<title>Checked Boxes</title>
<script src="https://code.jquery.com/jquery-1.10.2.js" ></script>
</head>
<body>
<div class="row">
  <div class="column"> <img class="demo cursor" src="img00.jpg"> </div>
  <div class="column"> <img class="demo cursor" src="img01.jpg"> </div>
  <div class="column"> <img class="demo cursor" src="img02.jpg"> </div>
  <div class="column"> <img class="demo cursor" src="img03.jpg"> </div>
  <div class="column"> <img class="demo cursor" src="img04.jpg"> </div>
  <div class="column"> <img class="demo cursor" src="img05.jpg"> </div>
</div>
</body>
<script>
jQuery(document).ready(function($) {
    $( "div.row .column:last-child" ).find("img:first").addClass("active");
});
</script>
</html>

Answer 3

您做错了方法。您不能使用“ +”运算符为该类附加值。

jQuery具有用于在任何元素中添加新类的内置方法。

您可以使用以下功能代替您的功能。

function initialSteps() {
   $(".row").find(".column:last").find("img:first").addClass("active");
});

Answer 4

您可以简单得多：

function initialSteps() {
  $(".column:last-child img:first-child").addClass("active");

}

Answer 5

您将要利用jQuery中的addClass()函数：

function initialSteps() {
  $(".row").find(".column:last").find("img:first").addClass("active");
}

您可以通过按以下方式链接选择器来缩短：

function initialSteps() {
   $(".row .column:last img:first").addClass("active");
}

Answer 6

您不需要串联这么多的find，只需添加一次完整的选择器即可，效率更高

function initialSteps() {
  $(".row .column:last img").addClass('active') 

}

jQuery命令未给出期望的结果

6 个答案: