从下一个元素jQuery中删除类

时间:2016-08-04 09:51:16

标签: javascript jquery html

我有一个这个HTML:

<div class="results">
<div class="resultitem" page="1">
    <div class="col-sm-12 odd">
        <div class="col-sm-2 noLRPadding"><p class="memFName">Arsene</p></div>
        <div class="col-sm-2 noLRPadding"><p class="memLName">Wenger</p></div>
        <div class="col-sm-3 noLRPadding"><p class="memEmail">louise.lockie@wilmingtonplc.com</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memLevel">Affiliate</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memCPD">0</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memTarCPD">10</p></div>
        <div class="col-sm-1 hidden noLRPadding"><p class="memDiff">10</p></div>
        <div class="col-sm-1 noLRPadding"><p><a class="memLink" href="/my-membership/cpd-centre/cpd-log/?m=CON-000184210">View</a></p></div>
        <div class="col-sm-1 noLRPadding text-center"><a class="showConfirm" href="#" data-user="CON-000184210" data-username="Arsene Wenger"><i style="font-size: 18px; color: #b43e91" class="fa fa-times-circle"></i></a></div>
    </div>
    <div class="logPanel hidden">
        <p>Hello</p>
    </div>
</div>
<div class="resultitem" page="1">
    <div class="col-sm-12 odd">
        <div class="col-sm-2 noLRPadding"><p class="memFName">Jack</p></div>
        <div class="col-sm-2 noLRPadding"><p class="memLName">Wilshire</p></div>
        <div class="col-sm-3 noLRPadding"><p class="memEmail">louise.lockie@wilmingtonplc.com</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memLevel">Affiliate</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memCPD">0</p></div>
        <div class="col-sm-1 noLRPadding"><p class="memTarCPD">10</p></div>
        <div class="col-sm-1 hidden noLRPadding"><p class="memDiff">10</p></div>
        <div class="col-sm-1 noLRPadding"><p><a class="memLink" href="/my-membership/cpd-centre/cpd-log/?m=CON-000184209">View</a></p></div>
        <div class="col-sm-1 noLRPadding text-center"><a class="showConfirm" href="#" data-user="CON-000184209" data-username="Jack Wilshire"><i style="font-size: 18px; color: #b43e91" class="fa fa-times-circle"></i></a></div>
    </div>
    <div class="logPanel hidden">
        <p>Hello</p>
    </div>
</div>

我正在尝试做的是在按下memLink链接时显示'hiddden'logPanel div,所以在脚本中我有:

$(".results").on("click", ".memLink", function (e) {
e.preventDefault();
$(this).nextAll('.logPanel').first().removeClass('hidden');
alert("hello");
});

但是我可能会调整它无法使用它。有些人可以放弃任何光吗?

谢谢, 克雷格

7 个答案:

答案 0 :(得分:0)

使用此代码:

$(".memLink").on("click", function (e) {
   $(this).closest(".resultitem").find('.logPanel:first').removeClass('hidden');
   e.preventDefault();
});

答案 1 :(得分:0)

抱歉,.memLink不在.logPanel附近。你必须使用类似的东西:

$(this).parent().next('.logPanel').removeClass('hidden');

答案 2 :(得分:0)

使用folder2

.closest()

答案 3 :(得分:0)

找到最近的类&#34; resultitem&#34;,然后找到必需的第一个元素

    $(this).closest(".resultitem").find(".logPanel:first").removeClass('hidden');

答案 4 :(得分:0)

试试这个

$(this).parents().find(".resultitem").find('.logPanel:first').removeClass('hidden');
e.preventDefault();

答案 5 :(得分:0)

使用closest()

$(".results").on("click", ".memLink", function (e) {
    e.preventDefault();
    $(this).closest(".odd").next(".logPanel").removeClass("hidden");
    alert("hello");
});

答案 6 :(得分:0)

好的,所以我有一个游戏,并设法得到你想要的。

我添加了一个小提琴,在这里:https://jsfiddle.net/f87echp6/1/ *请注意,我已删除了您的a链接,只是使用了#进行了演示。

这里是你需要的所有jQuery:

$(".memLink").on("click", function (e) {
    e.preventDefault();
    var item = $(this).closest('.resultitem');
    var logPanel = $(item).find('.logPanel');
    $(logPanel).removeClass('hidden');
});

这可以通过以下方式工作:

  1. 处理.memLink元素
  2. 的点击
  3. e.preventDefault();停止发生默认操作 - 在这种情况下是打开a链接
  4. 找到memLink最近的resultItem(作为父级div)
  5. 找到项目的孩子logPanel
  6. hidden孩子
  7. 中删除logPanel班级

    你肯定可以把它分成两行,但我已经把它搞定了,所以你可以看到发生了什么。

    快乐的编码!