javascript - 使用jquery按条件选择元素

Question

我有一个 ul与 li和 <i>标记为 child 。代码如下

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