使用.eq（3）代替.next（）。next（）。next（）

Question

好的，任何人都可以告诉我如何使用这一行代码。 广泛的解释将是伟大的 - 为什么这不起作用

我想改变这个

selected= $(this);
      selected = selected.next().next().next().next();

到此

var selected = $('div');
    selected = $(this);
    selected.eq(4).fadeTo(220,1);

但是这个人不想工作。 示例在这里http://codepen.io/anon/pen/raVyRw //这里我有代码，其中我使用next（）100次！

Answer 1

我创建了一个具有不透明度的css类，并使用mouseenter和mouseleave addClass事件结束了此事件：

＆＃13;

＆＃13;

$("div").on("mouseenter mouseleave", function(e) {
  //e.type describes the nature of the event.
  if (e.type == "mouseenter")
    //add class on mouseenter
    $(this).addClass('withOpacity');
  else
    //remove class on mouseleave
    $(this).removeClass('withOpacity');
});

＆＃13;

div {
  background-color: red;
  height: 100px;
  width: 100px;
  display: inline-block;
}
.withOpacity {
  opacity: 0.4
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>

＆＃13;

＆＃13;

＆＃13;

使用removeClass和hover

的结果相同

＆＃13;

＆＃13;

$("div").hover(function(e){
  	$(this).toggleClass('withOpacity');
});

＆＃13;

div {
  background-color:red;
  height:100px;
  width:100px;
  display: inline-block;
}

.withOpacity {
  opacity: 0.4
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<br>
</body>

＆＃13;

＆＃13;

＆＃13;