CODEWITHSUNDEEP
javascriptjquery
user2067005
user2067005

Reputation: 839

Jquery detect the main parent div

My problem that i am having is i want to get the parent id form a click within it. The problem comes when i have stacks of divs like as follows:

<div id="files">
<div id="F1"><span>Label</span></div>
<div id="F2"><span>Label</span></div>
<div id="F3"><span>Label</span></div>
<div id="F4"><span>Label</span></div>
</div>

I have the script to the point that if I click the F# div areas it will refer to its parent which is files, but if I was to click the label span, it would refer back to its parent with the is of the id F#. I basically need it to the point that if there is a click within the files div, I can get the id even though no exposed area of that div is showing.

The jquery I was using was this:

$(window).load(function(){

    $(document).bind("contextmenu", function(event) { 
        event.preventDefault();

        var pid = event.target.parentNode.id;
        var id = event.target.id;
        //$(pid).val().substring(0,4)
        $(this).parent();
        //alert((pid).val().substring(0,4));
        var pid = (pid).substring(0,6);    

        if(pid === "files" || pid === "filess" || pid === "folder"){
             $("<div class='custom-menu'>
                  <a onclick='fileHide()'>Open</a>
                  <br/>
                  <a onclick='newFile()'>Rename</a>
                  <br/>
                  <a href='#'>Share Folder</a>
                  <br/>
                  <a onclick='deleteFile(\""+ id +"\")'>Delete</a>
                </div>").appendTo("body")
                        .css({top: event.pageY + "px", left: event.pageX + "px"});
        }else{
             $("<div class='custom-menu'>
                  <a onclick='fileHide()'>Upload</a>
                  <br/>
                  <a onclick='newFile()'>New Folder</a>
                  <br/><a href='#'>Share Folders</a>
                  <br/><a href='#'>Deleted files</a>
                </div>").appendTo("body")
                        .css({top: event.pageY + "px", left: event.pageX + "px"});
        }

    }).bind("mouseup", function(event) {
        $("div.custom-menu").hide();
    });            
});

Upvotes: 0

Views: 385

Answers (1)

GautamD31
GautamD31

Reputation: 28753

Try like this

$(this).parent();

for each click on element call this,it will directly gives the parent of the selected(clicked) element

To know its id then try with

var parent_id = $(this).parent().attr('id');
alert(parent_id);

Upvotes: 1

Related Questions