CODEWITHSUNDEEP
javascriptjqueryhtmlalert
Vadivel Murugan M
Vadivel Murugan M

Reputation: 33

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">[email protected]</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">[email protected]</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">[email protected]</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">[email protected]</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">[email protected]</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">[email protected]</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">[email protected]</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">[email protected]</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">[email protected]</a></td>
<td><a href="#" class="show-pop-iframe btn btn-default hover-cust" data-placement="vertical">[email protected]</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();  
    }); 
})();

Upvotes: 0

Views: 893

Answers (3)

Azamantes
Azamantes

Reputation: 1451

Adding many event listeners on a group of similar nodes is considered a bad practice.

const table = document.querySelector('#your_table_id');
table.addEventListener('mouseover', function(event) {
    const target = event.target;
    const tag = target.tagName;
    const parentTag = target.parentNode.tagName;
    if(tag !== 'a' || parentTag !== 'td') {
        return; // not my target, leave the function
    }

    alert(target.textContent);
});

Upvotes: 0

Parag Bhayani
Parag Bhayani

Reputation: 3330

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());
  }
});

Upvotes: 2

Mohammad
Mohammad

Reputation: 21489

$(".hover-cust").hover(function(){
    alert($(this).text());
});
table, tr, td {
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
        <td><a href="#" class="hover-cust">[email protected]</a></td>
    </tr>
</table>

Upvotes: 1

Related Questions