Question

我有ul li和<i>标记作为孩子。代码如下

<li class="accordion put">
  <span><i class="fa fa-plus-circle"></i></span><span style="padding-left:5px;font-size: 18px;">Topic-Heading</span>
  <ul class="panel2" style="display: none;">
    <li class="testing"><i class="fa fa-chevron-right"></i> section 1</li>
    <li class="testing"><i class="fa fa-chevron-right"></i> section 2 </li>
    <li class="testing"><i class="fa fa-chevron-right"></i> section 3</li>
    <li class="testing"><i class="fa fa-chevron-right"></i> section 4 </li>
  </ul>
</li>

我有以下jquery代码，点击li点击课程，如下所示：

$(".put.accordion" ).click(function() {
    $(this).children("ul").toggle("slow");
    $(this).find("i").toggleClass("fa-plus-circle fa-minus-circle");
});

当我点击li标记时，上面的代码工作正常，但由于我提到find('i') i标记正在发生变化。我只需将i元素切换为class作为fa-plus-circle，并忽略i类fa-chevron-right。

请让我知道我哪里出错。

Answer 1

如果您想要一种独立于课程的方式来选择第一个<i>，您可以使用.first()将匹配的结果减少到仅返回的第一个<i>。

在您的情况下，您可以替换此行：

$(this).find("i").toggleClass("fa-plus-circle fa-minus-circle");

有了这个：

$(this).find("i").first().toggleClass("fa-plus-circle fa-minus-circle");

一般例子：

$('body').on('click', function() {
    console.log( $(this).find('i').first().text() )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click anywhere to return the contents of the first <code>&lt;i&gt;</code>.</p>

<i class="first">First</i>
<i class="second">Second</i>
<i class="third">Third</i>

Answer 2

您可以在find()中使用与其他jQuery选择器相同的语法。只需指定类：

$(".put.accordion" ).click(function() {
   $(this).children("ul").toggle("slow");
   $(this).find("i.fa-plus-circle i.fa-minus-circle").toggleClass("fa-plus-circle fa-minus-circle");
});

Answer 3

您可以找到：

find("i[class=fa-plus-circle]")

详情：https://www.w3schools.com/cssref/css_selectors.asp。希望能帮到你

使用jquery按条件选择元素

3 个答案: