如何使用jquery影响特定元素

Question

（感谢任何有帮助的人）

我在使用多个元素共享的类名的元素的单个实例上使用jQuery hover方法时遇到问题

下面我提供了我的代码：

HTML：

<div class="container">
  <div class="c_box">
    <div class="img">
        <svg hieght="0" width="0">
          <defs>
            <clipPath id="svgPath">
              <circle stroke="#000000" cx="125" cy="235" r="125"></circle>
              <rect x="0" y="0" width="250" height="230"></rect>
            </clipPath>
          </defs>
        </svg>
        <div class="rectangle">
          <div class="semi_circle"></div>
        </div>
        <span class="text">Painting</span>
    </div>

  </div>
  <div class="triangle"></div>
</div>

<div class="container">
  <div class="c_box">
    <div class="img">
        <svg hieght="0" width="0">
          <defs>
            <clipPath id="svgPath">
              <circle stroke="#000000" cx="125" cy="235" r="125"></circle>
              <rect x="0" y="0" width="250" height="230"></rect>
            </clipPath>
          </defs>
        </svg>
        <div class="rectangle">
          <div class="semi_circle"></div>
        </div>
        <span class="text">Painting</span>
    </div>

  </div>
  <div class="triangle"></div>
</div>

jQuery：

$(document).ready(function (){

  $(".container").hover(function(){
    $(".c_box").animate({top: "-37px" }, 250);
    $(".rectangle").delay(250).animate({right: "50px" }, 250);
    $(".text").delay(450).animate({left: "69px" }, 150);
    $(".triangle").delay(450).animate({top: "-20px" }, 150);
  },
    function(){
    $(".text").animate({left: "-105px" }, 150);
    $(".rectangle").delay(150).animate({right: "280px" }, 150);
    $(".c_box").delay(250).animate({top: "-360px" }, 250);
    $(".triangle").delay(450).animate({top: "0px" }, 150);
    }
  );
});$(document).ready(function (){

  $(".container").hover(function(){
    $(".c_box").animate({top: "-37px" }, 250);
    $(".rectangle").delay(250).animate({right: "50px" }, 250);
    $(".text").delay(450).animate({left: "69px" }, 150);
    $(".triangle").delay(450).animate({top: "-20px" }, 150);
  },
    function(){
    $(".text").animate({left: "-105px" }, 150);
    $(".rectangle").delay(150).animate({right: "280px" }, 150);
    $(".c_box").delay(250).animate({top: "-360px" }, 250);
    $(".triangle").delay(450).animate({top: "0px" }, 150);
    }
  );
});

代码工作正常，但是，这两个div都带有类＆＃39;容器＆＃39;受到影响。理想情况下，我想一次只影响一个div（鼠标与之交互的那个）

我熟悉＆＃39; $（this）＆＃39;选择。虽然，我知道它是否适用于这种情况。

Answer 1

您应该定位当前pools = [x for x in jsondata['entities'] if x.get('value') == 'pool'] if pools: print("pools found") 的{​​{1}}，.c_box，.rectangle，.text。可以使用.triangle来定位当前容器。

.container