Question

我正在尝试使用此锚标记将一个类添加到div中，该父级具有与其父级相同的父级。我研究了jQuery文档，并尝试了几种选择器的方法，但似乎没什么用。

<ul>
  <li>
    <div><a href="#" class="pop">produto 1</a><div>
    <div class="product_frame"></div>
  </li>
  <li>
    <div><a href="#" class="pop">produto 2</a><div>
    <div class="product_frame"></div>
  </li>
</ul>

我几乎可以肯定问题出在我的jQuery函数上，特别是在选择器上，但是我已经坚持了很长一段时间，所以现在我认为它可能是其他东西，比如也许我选择的特定选择对于选择器父/子是不可行的。

这是我的jQuery函数：

<script type="text/javascript">
    $("a .pop").click(function() {
       $(this).parents().find('product_frame').addClass("active");
});

我认为这是唯一相关的代码。谁能告诉我我做错了什么？

编辑：我尝试实现以下内容：

$("a.pop").click(function() {
   $(this).parent().next('.product_frame').addClass("active");
});

 $("a.popup").click(function() {

      $(this).closest("li").find('.product_frame').addClass("active");
 });

但是在单击锚标记时仍未添加该类。也许这是函数声明的问题？

我的CSS：

<style type="text/css">

.product_frame {
    position:fixed;
    top:120px;
    left:180px;
    right:80px;
    bottom:120px;
    display:none;
}

a.pop {
    text-decoration:none;
}

.active {
    display:block;
}

</style>

Answer 1

首先删除锚点和类之间的空格。那将寻找一个锚的后代元素。其次，使用.parent()和.next()（使用句点来指定班级）：

$("a.pop").click(function() {
   $(this).parent().next('.product_frame').addClass("active");
});

<强> jsFiddle example

（注意：请务必正确关闭你的div。在你的例子中，他们用开放的div标签关闭）

Answer 2

我在这里看到的最明显的错误是你的选择器：

$("a .pop")

它找到了带有类＆＃34; pop＆＃34;的元素。在锚元素中。你想要的是：

$('a.pop')

即。找到带有标签名称的元素＆＃34; a＆＃34; 和班级＆＃34; pop＆＃34;。

另一个问题是.parents()会一直向您提供父母一直到文档的开头，因此<div>，<li>，<ul>，... 。，<body>等。

相反，你只需要回到最近的<li>祖先，然后进行另一次搜索;还＆＃34; product_frame＆＃34;不是元素名称，以匹配您需要一个领先时期的类：

$('a.pop').closest('li').children('.product_frame')

或者，您可以执行j08691建议并首先选择父级（div），然后选择其下一个兄弟元素。

Answer 3

这是工作jquery

$("a.popup").click(function() {
   $(this).parent().find('.product_frame').addClass("active");
});

Demo

jQuery锚标记，用于将一个类添加到div，其父级与锚标记的父级相同

3 个答案: