单击父元素时获取 html 第三个子元素 ID

Question

I have a generate that code using Html:

<td align="center">
  <div class="popup" onclick="ChooseImageToolTip(this)">
      <a class="btn btn-default">
        <span class="glyphicon glyphicon-picture">
           <span class="popuptext" id=@TableRowId>A Simple Popup!</span>
        </span>
     </a>
  </div>
</td>

and i need to get the id of the class="popuptext" span element, and proccess it in the ChooseImageToolTip() javascript function. I pass the div element to the function.

Answer 1

You're passing a reference to the div containing the element. So in your function, you can use querySelector to find the .popuptext element, and read its id property:

function ChooseImageToolTip(element) {
    alert("ID: " + element.querySelector(".popuptext").id);
}

Live Example:

 function ChooseImageToolTip(element) { alert("ID: " + element.querySelector(".popuptext").id); }

 <table> <tbody> <tr> <td align="center"> <div class="popup" onclick="ChooseImageToolTip(this)"> <a class="btn btn-default"> <span class="glyphicon glyphicon-picture"> <span class="popuptext" id="row1">A Simple Popup!</span> </span> </a> </div> </td> </tr> <tr> <td align="center"> <div class="popup" onclick="ChooseImageToolTip(this)"> <a class="btn btn-default"> <span class="glyphicon glyphicon-picture"> <span class="popuptext" id="row2">A Simple Popup!</span> </span> </a> </div> </td> </tr> <tr> <td align="center"> <div class="popup" onclick="ChooseImageToolTip(this)"> <a class="btn btn-default"> <span class="glyphicon glyphicon-picture"> <span class="popuptext" id="row3">A Simple Popup!</span> </span> </a> </div> </td> </tr> <tr> <td align="center"> <div class="popup" onclick="ChooseImageToolTip(this)"> <a class="btn btn-default"> <span class="glyphicon glyphicon-picture"> <span class="popuptext" id="row4">A Simple Popup!</span> </span> </a> </div> </td> </tr> </tbody> </table>

Answer 2

You can get an elements id from its class like so.

 <span class="popuptext" id="abc">A Simple Popup!</span>    
 <script>
 var x = document.querySelector('.popuptext').id;
 console.log(x); //Would print abc
 </script>