在我的案例中,一直使用jquery过滤器

stuck in using jquery filter in my case

本文关键字:jquery 过滤器 一直 我的 案例      更新时间:2023-09-26

只使用js,我就可以选择4,6和8。

挑战是当我悬停一个项目时,但不是第一个,然后我需要输出/提醒3,5,7。当我将一个值悬停在输出中时,我需要将其从输出中排除。例如,我将鼠标悬停在1上,然后什么也没发生。如果我悬停在2上,那么它会输出/警报3,5,7。如果我悬停在3上,那么它会输出/警报5,7,因为3是其中一个值。

$('.item').filter(function (index) {
    return index > 2 && index % 2 == 1
}).css('font-weight', 'bold');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>

也许这会有所帮助:

// index starts from 0, so to select odd numbers you need to check with == 0
$('.item').filter(function (index) {
    // If you don't wan't 9 bold add && index < 8
    return index > 1 && index % 2 == 0;
}).css('font-weight', 'bold');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>

您应该选择除第一个:not(:first)之外的所有项目。

然后您可以选择值为3,5,7 的项目

$('.item').filter(function (index) {
    return index > 2 && index % 2 == 1
}).css('font-weight', 'bold');

迭代这些值,如果值等于您悬停的值,则不要将其添加到文本字段中。

$('.item').filter(function (index) {
    return index > 2 && index % 2 == 1
}).css('font-weight', 'bold');
$('.item:not(:first)').mouseover(function() {
    var text ="";
    var itemval = $(this).text();
    items = $('.item').filter(function (index) {
        return index > 1 && index % 2 == 0 && index < 8
    })
    $.each(items, function(i,val){
        var value =  $(val).text();
        if( value != itemval ){
            text += value + ' ';
        }
   });
   $('.answer').text(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="answerswer"></div>

尝试

 $(".item:gt(0)").hover(function () {
    var currentIndex = $(this).index();
    var oddEvent = currentIndex % 2;
    $('.item').removeClass("test");
    $('.item').filter(function (index) {
        return index % 2 == oddEvent && index > 0;
    }).addClass("test");
});

演示