從下一個元素jQuery中刪除類

Question

我有一個這個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");
});

但我可能會調整，但我不能讓它工作。 有些人可能會掉燈嗎？

謝謝，克雷格

Answer 1

使用此代碼：

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

Answer 2

抱歉，但.memLink不在.logPanel附近。 你必須使用這樣的東西：

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

Answer 3

使用.closest()

$(this).closest('.noLRPadding').next().removeClass('hidden');

Answer 4

找到最接近的類“resultitem”，然后找到所需的第一個元素 。

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

Answer 5

試試這個吧

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

Answer 6

使用closest()

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

Answer 7

好的，所以我有一個游戲，並設法得到你想要的。

我添加了一個小提琴，在這里： 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. e.preventDefault(); 停止發生的默認操作 - 在這種情況下是打開a的鏈接
3. 找到memLink最接近的resultItem （作為父div）
4. 找到項目的子logPanel
5. 從logPanel子項中刪除hidden類

你肯定可以把它分成兩行，但我已經把它搞定了，所以你可以看到發生了什么。

快樂的編碼！