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

Question

我有一个使用 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>

我需要获取 class="popuptext" span 元素的 id，并在 ChooseImageToolTip() javascript 函数中处理它。 我将 div 元素传递给函数。

Answer 1

您正在传递对包含该元素的div的引用。 因此，在您的函数中，您可以使用querySelector查找.popuptext元素，并读取其id属性：

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

现场示例：

 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

您可以像这样从它的类中获取元素 id。

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