通用的jQuery语句操纵许多直接的儿童元素

Question

我想使用jQuery隐藏DIV，而在Div上进行鼠标并显示另一个Div，类似于悬停效果。

我的代码一次选择所有DIVS，但我只想选择鼠标要选择的DIV。我该怎么做？

我将唯一的CSS ID分配给DIVS，并重复了相应的jQuery代码，并将代码调整为这些CSS ID。

，但这意味着我将不得不重复10次不同的divs。

<div class="swapcontainer swaps3 nospacebetween contentpadding1 bgcolorred">
  <div class="swapsubcontainer swap1">
    <div id="div1a" class="swap first" style="display:block;">
      <div class="swappadding1">
        <p>text1</p>
      </div>
    </div>
    <div id="div1b" class="swap second" style="display:none;" >
      <div class="swappadding1">
        <p>text2</p>
        <a href="/">link</a>
      </div>
    </div>
  </div>
  <div class="swapsubcontainer swap2">
    <div id="div1a" class="swap first" style="display:block;">
      <div class="swappadding1">
        <p>text1</p>
      </div>
    </div>
    <div id="div1b" class="swap second" style="display:none;" >
      <div class="swappadding1">
        <p>text2</p>
        <a href="/">link</a>
      </div>
    </div>
  </div>
  <div class="clear"></div>
</div>

jQuery(document).ready(function(){
  jQuery(".swapsubcontainer").mouseenter(function(){
    jQuery(".swapsubcontainer").children(".first").css("display", "none");
    jQuery(".swapsubcontainer").children(".second").css("display", "block");
  });
  jQuery(".swapsubcontainer").mouseleave(function(){
    jQuery(".swapsubcontainer").children(".first").css("display", "block");
    jQuery(".swapsubcontainer").children(".second").css("display", "none");
  });
});

请参阅：http：//jsfiddle.net/ander9023/dwcfgqp5/

我如何更改jQuery代码，以便可以对任何数量的DIVS进行一定的使用，但仅在鼠标当前放置的DIV上工作？

Answer 1

更改jquery（"。swapsubContainer"）为$（this）

jQuery(document).ready(function(){
   jQuery(".swapsubcontainer").mouseenter(function(){
      $(this).children(".first").css("display", "none");
      $(this).children(".second").css("display", "block");
   });
   jQuery(".swapsubcontainer").mouseleave(function(){
      $(this).children(".first").css("display", "block");
      $(this).children(".second").css("display", "none");
   });
});