Remove class from next element jQuery

Question

I've got a this 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>

And what I'm trying to do is show the 'hiddden' logPanel div when the memLink link is pressed so in script I've got:

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

but tweak as I might I can't get this to work. Could some =one shed any light please?

Thanks, Craig

Answer 1

Use this code:

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

Answer 2

Sorry but .memLink is not near .logPanel . You must use something like that:

$(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

Try this one

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

Answer 6

use closest()

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

Answer 7

OK, so I've had a play and managed to get what you wanted.

I've added a fiddle, here: https://jsfiddle.net/f87echp6/1/ *note, that I've removed your a links and just used # for the demo.

Here's all the jQuery you need:

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

This works in the following way:

1. Handle the click of the .memLink element
2. e.preventDefault(); stops the default action happening - which in this case is to open the a 's link
3. Find the memLink 's closest resultItem (being the parent div)
4. Find the child logPanel of the item
5. Remove the hidden class from the logPanel child

You could surely neaten this down into a couple of lines, but I've stepped it out, so you can see what's happening.

Happy coding!