在jQuery中遍历HTML DOM元素

Question

这段html是通过ajax调用加载的。 有很多这样的html集。 这只有1套：

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

Answer 1

您获得标题的行很好。 该行获得的日期正在寻找这是一个表按钮的祖先元素，但按钮没有在表中 ，它只是在表的在div如此：

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

现场示例 ：

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

Answer 2

如果您想使用祖先元素，则我希望使用.parents而不是.closest ，因此将是这样的：

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