javascript - 如何在 jQuery 中选择特定的类

Question

这就是问题所在；我有几个 div，如下所示，相同的类名，没有 id。我需要修改 <span> <h4> 下方的文字标签，基于鼠标光标在这 3 张图像上的位置。我通过使用 mouseenter() 使用 javascript 执行此操作方法。问题在于该方法会更改整个网页中的每个跨度文本，而不仅仅是鼠标光标当前所在的类名称为“parent”的类。

<div class="parent">
   <div class="parent.child">
      <a href="#"></a>
      <div class="parent.chil.child">
          <div class="parent.chil.child.child">
               <img src ="link1" data-price="a">
               <img src ="link2" data-price="b">
               <img src ="link3" data-price="c">
          </div>
      </div>
   </div>
   <h4>
      <a href= "aspPage.aspx">text</a>
   </h4>
   <p><span class = "spanClassName">text to be changed</span>some text</p>
   <div class=child1"></div>
</div>

如何从当前的“父”div 中仅选择鼠标所在的链接，即使有多个具有相同类名“parent”的 div。

我希望我被理解了，如果没有，请询​​问，我会尽力解释更多。

Answer 1

您可以使用 .closest()使用 .parent 类找到父类

$('.parent\\.chil\\.child\\.child img').on('hover', function(){
    $(this).closest('.parent').find('.spanClassName').text($(this).attr('data-price'))
});

DEMO

另外根据 documents您需要在选择器中转义 .

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").