在我的情况下坚持使用jquery过滤器

Question

只使用js我能够选择4,6和8.

挑战是当我悬停一个项目而不是第一个项目时，我需要输出/警告3,5,7。 当我在输出中悬停一个值时，我需要从输出中排除它。 例如，我悬停1，然后没有任何反应。 如果我悬停2，则输出/警告3,5,7。 如果我悬停3，则输出/警告5,7，因为3是这些值之一。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

也许这会有所帮助：

// 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>

Answer 2

试

 $(".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");
});

DEMO

Answer 3

您应该选择除:not(:first)之前的所有项目。

然后是值为3,5,7

的项目

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

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

＆＃13;

＆＃13;

$('.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);
});

＆＃13;

<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="answer"></div>

＆＃13;

＆＃13;

＆＃13;