I have a context menu where I want to use certain method it finds p/div, so right now I'm just logging so that to see if I find the proper element when I click.
HTML
<div>Hello I'm div</div>
<p>I'm para <span>I'm span inside para</span></p>
code
var paraElm = $target.closest("p")
if(paraElm){
console.log("i have selected the element is para",paraElm)
}
it gives me an array in output
log for para
i have selected the element is para,
n.fn.init [p.locked.sender, prevObject: n.fn.init(1),context: p.locked.sender]
0: p.locked.sender
context: p.locked.sender
length: 1
log for span inside para
i have selected the element is para,
n.fn.init [p.locked.sender, prevObject: n.fn.init(1), context: span.selected]
0: p.locked.sender
context: span.selected
length: 1
when I clicked on span, it shouldn't log even if it's inside p tag
UPDATE#1:
So I made some changes, used a condition to remove won’t log for span tag, just in JSFiddle it's not working as intended, but works as i expected it to.
$(document).ready(function() {
$("body").on('click', function(event) {
var $target = $(event.target);
var getElm = $target.closest('p');
if (getElm.context.nodeName.toLowerCase() != 'span') {
console.log("I got the element", getElm);
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Hello I'm div</div>
<p>I'm para <span>I'm span inside para</span></p>// i hope this solve your issue
$(document).ready(function() {
$('span').addClass('span');
$('body').on('click', function(event) {
editTask(event.target);
});
});
function editTask(node) {
if(!($(node).hasClass('span'))){
var closest_element = $(node).text();
console.log(closest_element);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Hello I'm div</div>
<p>I'm para <span>I'm span inside para</span></p>I made some changes, used a condition to remove won’t log for span tag, but works as I expected it to.
$(document).ready(function() {
$("body").on('click', function(event) {
var $target = $(event.target);
var getElm = $target.closest('p,div');
if (getElm && getElm.length) {
console.log("I got the element", getElm[0]);
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Hello I'm div</div>
<p>I'm para <span>I'm span inside para</span></p>
<p>I'm para 2</p>