Question

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

Answer 1

获得标题的行很好。获取日期的行正在寻找按钮的祖先元素，但按钮不是表中的，它只是在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>

Answer 2

如果你想要追溯你的祖先元素，我希望.parents而不是.closest，所以它会是这样的：

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

遍历jQuery中的HTML DOM元素

2 个答案: