Jquery Question posted in
The official Jquery Api Documentation can be found here.

Why doesn't this jquery function work with multiple if statements?

Each of the following if statements works perfectly as long as the other if statement isn’t present.

I don’t understand why having both if statements causes the function not to work.

I’ve tried so many variations but can’t figure it out.

This is the code:

$("a").click(function(event){   
    event.preventDefault();
    let lItem = document.querySelectorAll(".listing-item");
    let mItem = document.querySelectorAll(".menu-item");    
    let destination = $(this).attr("href");

    if ( $(this).parent(lItem) )  {
        tlUp.tweenTo(0, {
            onComplete: () => {
                window.location = destination;
            }
        });
    }

    if ( $(this).parent(mItem) ) {
        tlMenu.tweenTo(0, {
            onComplete: () => {
                window.location = destination;
            }
        });
    }
});
Tags:

2

Answers


  1. 0

    The jQuery .parent() method expects a string or nothing for argument, you are passing an instance of NodeList, that is equivalent to passing nothing. For this reason both your conditions are true, because $(this) always has a parent (since it is not document root).

    If you want to check whether an element’s parent belongs to certain groups defined by lItem or mItem, you should use a different approach. A correct way to do this is by using jQuery’s .closest() method, which accepts a string selector and traverses up the DOM to find the first ancestor that matches the provided selector.

    For example:

    if ($(this).closest('.listing-item').length > 0) {
    // one ancestor belongs to the 'listing-item' class
}
if ($(this).closest('.menu-item').length > 0) {
    // one ancestor belongs to the 'menu-item' class
}

    Or, if you want to check if element parent has that specific class, you could use this form:

    if ($(this).parent().is('.listing-item')) {
    // the parent belongs to the 'listing-item' class
}
if ($(this).parent().is('.menu-item')) {
    // the parent belongs to the 'menu-item' class
}

    In this last example .parent() is used to select direct parent of current element, then .is(...) is used to check if that parent element has that specific class.

    Login or Signup to reply.
  2. 0

    Based on your given code, it seems like you want to check that if an immediate parent of <a> has a specific class (either listing-item or menu-item) then based on that perform a different action.

    In that case, you need to modify your code like the below: (by using .hasClass() along with .parent())

    $("a").click(function(event){   
    event.preventDefault();
    let destination = $(this).attr("href");

    if ( $(this).parent().hasClass('listing-item') )  {
        tlUp.tweenTo(0, {
            onComplete: () => {
                window.location = destination;
            }
        });
    }

    if ( $(this).parent().hasClass('menu-item') ) {
        tlMenu.tweenTo(0, {
            onComplete: () => {
                window.location = destination;
            }
        });
    }
});

    References:

    .parent()

    .hasClass()

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search