Jquery 使用与特定子级最近的（）从父级获取

我试图让父母中的特定孩子改变他们的课程。我对HTML和jQuery非常陌生，所以如果其中有奇怪的东西，请原谅。 更具体地说，我想让所有具有fa-star-o的类都更改为fa-star

我正在尝试这样的事情： $this.closes'all-star-wrapper'。查找'fa-star-o'。stoptrue，true.prevAll.andSelf.remove类'fa-star-o'。添加类'fa-star'

以下是HTML：

 <div class="users">
                            <p>
                                <span class="rater">users</span>
                                <span class="all-star-wrapper">
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o left-star"></span>
                                    </span>
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o right-star"></span>
                                    </span>
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o left-star"></span>
                                    </span>
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o right-star"></span>
                                    </span>
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o left-star"></span>
                                    </span>
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o right-star"></span>
                                    </span>
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o left-star"></span>
                                    </span>
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o right-star"></span>
                                    </span>
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o left-star"></span>
                                    </span>
                                    <span class="star-wrapper">
                                        <span class="fa fa-star-o right-star"></span>
                                    </span>
                                </span>
                            </p>
                        </div>

The jQuery:

<script>
    (function($){
    $('.fa').hover(
        // Handles the mouseover
        function() {
                       // $(this).parent().parent().child('fa-star-o').prevAll().andSelf().removeClass('fa-star-o');
                        $(this).closest('all-star-wrapper').find('fa-star-o').stop(true,true).prevAll().andSelf().removeClass('fa-star-o').addClass('fa-star');//this is what i am trying
           },

        // Handles the mouseout
        function() {

            $(this).prevAll().andSelf().removeClass('fa-star');
            $(this).prevAll().andSelf().addClass('fa-star-o');
        })})(jQuery);</script>

---

您的代码中的选择器前面没有类的周期，例如“fa-star-o”应该是“.fa-star-o”

---

$this.closest.all-star-wrapper.find.fa-star-o.stoptrue，true.prevAll.andSelf.removeClass.fa-star-o.addClass.fa-star'

您的实际目标是什么，因为代码有点混乱，并且似乎在做很多示例中不需要的额外事情带样式的JSFIDLE也很好：是的，对不起，我没有清理它，我想让所有带fa-star-o的类都改成fa-star，但为此，我需要找到父类并作为子类访问它，否则我认为如果不设置样式，这些空的跨度将没有任何用处。。。你至少能提供样式吗？这是因为它们不是全等级，全等级应该是。fa-star-o@Lúthien：这不是一个“完整类”，而是一个同时拥有/属于两个类的元素。因此，这两个类名之前都需要句点，并且中间没有空格：.fa.fa-star-o将选择同时具有类fa和fa-star-o的元素。如果没有句点，fa-star-o作为选择器将选择一个标记名为fa-star-o的元素，这在HTML中当然不存在，和.fa.fa-star-o，中间有一个空格，可以查找类为fa-star-o的元素，它是类为fa.dude的元素的后代。。“只有两个不同的类被分配给span元素。”CBroe解释道

.ratings {
  overflow: auto;
  margin-bottom: 1rem;
}

.ratings .all-star-wrapper {
    display: inline-block;
}

.ratings .star-wrapper {
    width: 8px;
    height: 16px;
    overflow: hidden;
    display: block;
    position: relative;
    float: left;
    clear: none;
}

.ratings .star-wrapper .fa {
    position: absolute;
    margin-left: 0;
    color: #45b4d9;
}

.ratings .star-wrapper .fa.left-star {
    left: 0;
}

.ratings .star-wrapper .fa.right-star {
    right: 1px;
}

/* line 277, ../scss/_common.scss */
.ratings p {
  margin-bottom: 0;
}
/* line 281, ../scss/_common.scss */
.ratings div {
  clear: both;
}
/* line 285, ../scss/_common.scss */
.ratings .rater {
  margin-right: 0.5rem;

}
/* line 289, ../scss/_common.scss */
.ratings .fa {
  color: #45b4d9;
  font-size: 1rem;
    margin-left:-4px;
}