使用jquery按条件选择元素答案

【问题标题】：select elements by condition using jquery使用jquery按条件选择元素
【发布时间】：2018-01-07 18:34:01
【问题描述】：

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

<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 标签都在改变。我只需要将具有class 的i 元素切换为fa-plus-circle 并忽略具有fa-chevron-right 类的i。

请告诉我哪里出错了。

【问题讨论】：

标签： javascript jquery jquery-selectors

【解决方案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>

【讨论】：

【解决方案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");
});

【讨论】：

【解决方案3】：

你可以找到：

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

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

【讨论】：