javascript - 在 jQuery 中遍历 HTML DOM 元素-6ren

javascript - 在 jQuery 中遍历 HTML DOM 元素

转载作者：行者123 更新时间：2023-11-30 17:22:39

这段 html 由 ajax 调用加载。有很多这样的html集。这只有一套:

print '<div id="'.$row['Event ID'].'" data-role="collapsible" data-collapsed="true">';

        print '<h5 class="title">'.$row['Title'].'</h5>';
        print '<ul data-role="listview" id="today_events">';
        print '<li class="event"><a href="#">';
        print '<table><tr><td>Date</td>';
        print '<td class="date" style="padding: 10px;">'.$row['Date'].'</td>';
        print '</tr><tr>';
        print '<td> Time </td>';
        print '<td class="time" style="padding: 10px;">'.$row['Time_Duration'].'</td>';
        print '</tr><tr>';
        print '<td> Venue </td>';
        print '<td class="venue" style="padding: 10px;">'.$row['Venue'].'</td>';
        print '</tr></table></a></li>';
        print '<li style="background-color: #CADECC;">';
        print '<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>';
        print '</li></ul>'; 

        print '</div>';

我试图在单击按钮时发出警报。警报应包含特定 $row 数据的标题和日期。

这是我的 jQuery 代码(但它不起作用。我看到一个空白警告):

$("body").on('click','button',function(){
    var title = $(this).closest("div").find(".title").text();
    var date =  $(this).closest("table").find(".date").text();
    //var time =  $(this).parents().find(".time").text();
    //var venue = $(this).parents().find(".venue").text();

    alert(title+date);
    });

最佳答案

您获得标题的行很好。获取日期的行正在寻找作为表格的按钮的祖先元素，但按钮不在表格中，它只是在表格所在的 div 中。所以:

var date =  $(this).closest("div").find("table .date").text();

Live Example :

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<div id="event1" data-role="collapsible" data-collapsed="true">

<h5 class="title">Event Title One</h5>
<ul data-role="listview" id="today_events">
<li class="event"><a href="#">
<table><tr><td>Date</td>
<td class="date" style="padding: 10px;">01/01/2014</td>
</tr><tr>
<td> Time </td>
<td class="time" style="padding: 10px;">1 hour</td>
</tr><tr>
<td> Venue </td>
<td class="venue" style="padding: 10px;">One Plaza</td>
</tr></table></a></li>
<li style="background-color: #CADECC;">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>
</li></ul>

</div>

<div id="event2" data-role="collapsible" data-collapsed="true">

<h5 class="title">Event Title Two</h5>
<ul data-role="listview" id="today_events">
<li class="event"><a href="#">
<table><tr><td>Date</td>
<td class="date" style="padding: 10px;">02/02/2014</td>
</tr><tr>
<td> Time </td>
<td class="time" style="padding: 10px;">2 hours</td>
</tr><tr>
<td> Venue </td>
<td class="venue" style="padding: 10px;">Two Plaza</td>
</tr></table></a></li>
<li style="background-color: #CADECC;">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>
</li></ul>

</div>

<script>
  (function() {
    "use strict";
    $("body").on('click','button',function(){
      var title = $(this).closest("div").find(".title").text();
      var date =  $(this).closest("div").find("table .date").text();
      //var time =  $(this).parents().find(".time").text();
      //var venue = $(this).parents().find(".venue").text();

      alert(title+date);
    });
  })();
</script>
</body>
</html>