javascript - How can I find current element text on mouseover using jquery -
this code,
<!doctype html> <html> <body> <svg id="a" height="210" width="400"> <path id="b" d="m150 0 l75 200 l225 200 z" /> </svg> </body> </html> when mouse on b, want code (path id="b" d="m150 0 l75 200 l225 200 z" ).how can using jquery?
you can use outerhtml:
var path = $("#b")[0].outerhtml; // <path id="b" d="m150 0 l75 200 l225 200 z"></path> then combine hover:
$("#b").hover(function() { console.log($(this)[0].outerhtml); }); as pointed out, won't work in ie because doesn't follow specification. can workaround cloning <path> element, appending html body make part of dom, grabbing rendered html there.
note: won't exact representation of html because it's out of context. example, contains xmlns, since it's jquery object can modify how like:
$("#b").hover(function() { // create clone of <path> var clone = $(this).clone(); // append <body> clone.appendto("body"); // wrap in containing <div> ... you'll see why in minute clone.wrap("<div>"); // grab innerhtml of containing <div> - outerhtml won't work console.log(clone.parent().html()); // prints: <path xmlns="http://www.w3.org/2000/svg" id="b" d="m 150 0 l 75 200 l 225 200 z" /> // remove our temporary element again... clone.parent().remove(); });
Comments
Post a Comment