Vadivel Murugan M Vadivel Murugan M - 5 months ago 11
HTML Question

How to get text value of same class in jquery

I have 10 records in my table. Each record having same class name. How can I alert the table data value(text) using jquery this.value while hover the data text.
Here is my code

<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email1@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email2@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email3@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email4@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email5@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email6@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email7@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email8@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email9@domain.com</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">email10@domain.com</a></td>


Here is my script. I'm using webui api for iframe popover. For tables I have used datatables.

(function(){
var settings = {
trigger:'hover',
title:'Send Mail To User',
content:'',
multi:true,
closeable:false,
style:'',
cache:false,
delay:300,
padding:true,
backdrop:false,
};

$('a.show-pop-iframe').on('mouseenter',function () {
alert($(this).text());
settings.url='emailtype.php?id='+$(this).text();
function initPopover(){
var iframeSettings = {
placement:'auto', //values: auto,top,right,bottom,left,top-right,top-left,bottom-right,bottom-left,auto-top,auto-right,auto-bottom,auto-left,horizontal,vertical
container: document.body, // The container in which the popover will be added (i.e. The parent scrolling area). May be a jquery object, a selector string or a HTML element. See https://jsfiddle.net/1x21rj9e/1/
width:'auto', //can be set with number
height:'auto', //can be set with number
closeable:true,
padding:false,
type:'iframe',
url:settings.url
};

$('a.show-pop-iframe').webuiPopover('destroy').webuiPopover($.extend({},settings,iframeSettings));
}

initPopover();
});
})();

Answer

If you have class 'hover-cust' then

$('.hover-cust').on("mouseenter", function() {
  alert($(this).text());
});

If you want to alert on td then

$('td').on("mouseenter", function() {
  var link = $(this).find(".hover-cust");
  if(link && link.length > 0) {
    alert($(link).text());
  }
});
Comments