Get parent form class when you click on an element jQuery

Question

Let's start with the HTML:

<form class="send_units">
    <div class="buttons">
        <div id="button_attack" class="button">
            <div class="caption at">Attack!</div>
        </div>
        <div id="button_support" class="button">
            <div class="caption sp">Support!</div>
        </div>
    </div>
</form>

This is an example of the code on a website. I've made a script for that website. To run that script, a player can use Tampermonkey. It just adds some code to the webpage. Note: We cannot change the HTML!

So, I've to get the classname of the form (send_units in this example), when you click on the Attack! button.

To figure out on which element the user clicks, we use Javascript:

window.onclick = function(e){
    var clickedClass = e.target.className;
    var clickedID = e.target.id;

    if(clickedClass == 'caption at'){
        // Check if parent form has class send_units
    }
}

So, when the user clicks on the button with class = 'caption at' , we have to check if the form class is send_units.

I've tried this to get the class:

jQuery(e).find('form').parent().prop('class')

but it returns "undefined". (Logic says to me: Get the parent of the clicked element, with element "form" and get the className of that element).

Can anyone explains to me what I'm doing wrong here?

Thanks!

Answer 1

Use .parents( selector ) to traverse multiple levels up the DOM to the element you need and .hasClass( class ) to test for presence of a class.

 window.onclick = function(e){ var clickedClass = e.target.className; var clickedID = e.target.id; if(clickedClass == 'caption at'){ var is_send_units = $( e.target ).parents( 'form' ).hasClass( 'send_units' ); console.log( is_send_units ); if( is_send_units ){ // do stuff } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="send_units"> <div class="buttons"> <div id="button_attack" class="button"> <div class="caption at">Attack!</div> </div> <div id="button_support" class="button"> <div class="caption sp">Support!</div> </div> </div> </form> 

Answer 2

尝试一下，因为您已经知道div级别了。

$(e.target).parent().parent().parent().attr("send_units")