jqueryで同じクラスのテキスト値を取得する方法

Question

私のテーブルには10個のレコードがあります。各レコードは同じクラス名を持ちます。 jquery this.valueを使用してデータ・テキストをホバリングしながら表のデータ値（テキスト）を警告するにはどうすればよいですか。 ここに私のコードです

<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> 

ここは私のスクリプトです。私はiframe popoverのためにwebui apiを使用しています。テーブルの場合、私はデータテーブルを使用しました。多くの追加

(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 1

あなたは

​​

その後、クラスのホバー・カスト」をお持ちの場合は、TDに警告するようにしたい場合は、

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

Answer 2

$(".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">email1@domain.com</a></td> 
 
     <td><a href="#" class="hover-cust">email2@domain.com</a></td> 
 
     <td><a href="#" class="hover-cust">email3@domain.com</a></td> 
 
     <td><a href="#" class="hover-cust">email4@domain.com</a></td> 
 
     <td><a href="#" class="hover-cust">email5@domain.com</a></td> 
 
     <td><a href="#" class="hover-cust">email6@domain.com</a></td> 
 
     <td><a href="#" class="hover-cust">email7@domain.com</a></td> 
 
     <td><a href="#" class="hover-cust">email8@domain.com</a></td> 
 
     <td><a href="#" class="hover-cust">email9@domain.com</a></td> 
 
     <td><a href="#" class="hover-cust">email10@domain.com</a></td> 
 
    </tr> 
 
</table>

Answer 3

イベントリ類似ノードのグループ上のステナーは悪い習慣とみなされます。

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