从最近()的父级到特定孩子

时间:2014-10-14 14:27:16

标签: jquery html

我试图让父母中的特定孩子改变那些课程。我是HTML和jQuery的新手,所以如果有奇怪的东西请原谅。 更具体地说,我想让所有带有fa-star-o的课程改为fa-star。

我正在尝试这样的事情: $(本).closest('全明星包装')。找到(' FA星级O')停止(真,真).prevAll()andSelf(。 ).removeClass(' FA-星 - 邻'。)addClass(' FA-星&#39);

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

造型:

.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;
}

1 个答案:

答案 0 :(得分:0)

您没有句点(针对课程),例如('fa-star-o')应该是代码中选择器之前的('.fa-star-o')

$(this).closest('.all-star-wrapper').find('.fa-star-o').stop(true,true).prevAll().andSelf().removeClass('.fa-star-o').addClass('.fa-star');