用jQuery更改前一个元素的子类的类

Question

I'm trying to do a toggle on click that changes a class (font awesome) like so:

$( ".expandTrigger" ).click(function() {
    $( ".expand" ).first().toggle( "fast", function() {});

    if ( $( this ).prev().child().is( ".fa-plus-circle" ) ) {
      $('.fa-plus-circle').toggleClass('.fa-minus-circle')
    }

    if ( $( this ).prev().child().is( ".fa-minus-circle" ) ) {
      $('.fa-minus-circle').toggleClass('.fa-plus-circle')
    }
  });

});

What am I doing wrong? I've run through several examples on SO, but not found anything that can help on this situation. HTML is as follows:

<a href="#"  class="expandTrigger open" ><i class="fa fa-minus-circle"></i> Some Title Here</a>
              <div class="expand open" >
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
                <ul>
                  <li>Cum sociis natoque penatibus et magnis</li>
                  <li>Dis parturient montes, nascetur ridiculus mus</li>
                  <li>Nam fermentum, nulla luctus pharetra</li>
                  <li>Vulputate, felis tellus mollis orci</li>
                  <li>Sed rhoncus sapien nunc eget odio</li>
                </ul>
              </div>

With this html repeated below several times (in order to have several toggle sections).

Answer 1

The i element is a child of the expandTrigger element, not its siblings child

$(".expandTrigger").click(function () {
    $(this).next(".expand").toggle("fast", function () {});
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

---

If you want to change the class after the toggle is complete then

$(".expandTrigger").click(function () {
    $(this).next('.expand').toggle("fast", function () {
        $(this).prev().find('i').toggleClass('fa-plus-circle fa-minus-circle')
    });
});

Demo: Fiddle

Answer 2

If this block of HTML is repeated, your sequence of elements is A DIV A DIV A DIV ... So to get to the previous plus or minus circle, you have to use .prev() twice:

$(this).prev().prev().child().toggleClass('fa-plus-circle fa-minus-circle');

Another problem with your code is that even if you were traversing correctly in your if , you were changing the class of all elements with that class, not just the one you found.