select 个元素按条件使用 jquery

Question

我有一个带有 li 和 <i> 标签的 ul 作为 children。代码如下

<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 代码来切换 class 单击 li 如下所示：

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

当我点击 li 标签时，上面的代码工作正常，但是因为我已经提到 find('i')，所以 i 标签都在改变。我只需要将具有 class 的 i 元素切换为 fa-plus-circle 并忽略具有 class fa-chevron-right.[=26= 的 i ]

请让我知道哪里出错了。

Answer 1

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

$(".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 2

您可以找到：

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

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

Answer 3

如果您想要 class 独立的方式来选择第一个 <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>

select 个元素按条件使用 jquery

select elements by condition using jquery

javascript

jquery

jquery-selectors