遍历jQuery中的HTML DOM元素 [英] traversing through HTML DOM elements in jQuery

问题描述

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

  print'< div id ='。$ row ['Event ID']。' data-role =collapsibledata-collapsed =true>'; 
 
 print'< h5 class =title>'。$ row ['Title']。'< / h5>'; 
 print'< ul data-role =listviewid =today_events>'; 
 print'< li class =event>< a href =＃>'; 
 print'< table>< tr>< td>日期< / td>'; 
 print'< td class =datestyle =padding：10px;>'。$ row ['Date']。'< / td>'; 
 print'< / tr>< tr>'; 
 print'< td>时间< / td>'; 
 print'< td class =timestyle =padding：10px;>'。$ row ['Time_Duration']。'< / td>'; 
 print'< / tr>< tr>'; 
 print'< td> Venue< / td>'; 
 print'< td class =venuestyle =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-calendarstyle =width：170px; float：right; position：relative： ;>添加到日历< / button>'; 
 print'< / li>< / ul>'; 
 
 print'< / div>'; 
  

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

这是我的jQuery代码但是它不起作用，我看到了一个空白的提示）：

$ $ $（body）。on（'click'，'按钮'，函数（）{
var title = $（this）.closest（div）。find（。title）。text（）;
var date = $（this）。最近（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>示例< / title> 
< / head> 
< body> 
< div id =event1data-role =collapsibledata-collapsed =true> 
 
< h5 class =title>事件标题One< / h5> 
 
< li class =event>< a href =＃> 
< table>< tr>< td>日期< / td> 
< td class =datestyle =padding：10px;> 01/01/2014< / td> 
< / tr>< tr> 
< td>时间< / td> 
< td class =timestyle =padding：10px;> 1小时< / td> 
< / tr>< tr> 
< td> Venue< / td> 
< td class =venuestyle =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-calendarstyle =width：170px; float：right; position：relative; >添加到日历< / button> 
< / li>< / ul> 
 
< / div> 
 
< div id =event2data-role =collapsibledata-collapsed =true> 
 
< h5 class =title>事件标题Two< / h5> 
 
< li class =event>< a href =＃> 
< table>< tr>< td>日期< / td> 
< td class =datestyle =padding：10px;> 02/02/2014< / td> 
< / tr>< tr> 
< td>时间< / td> 
< td class =timestyle =padding：10px;> 2小时< / td> 
< / tr>< tr> 
< td> Venue< / td> 
< td class =venuestyle =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-calendarstyle =width：170px; float：right; position：relative; >添加到日历< / button> 
< / li>< / ul> 
 
< / div> 
 
< script> （'click'，'button'，function（）{
 var title = 
（function（）{
use strict; 
 $（body $（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）。父母（）。find（。venue）.text（）; 
 
 alert（title + date）; 
}）; 
}）（）; 
< / script> 
< / body> 
< / html> 
  

This piece of html is loaded by an ajax call. There are plenty of such sets of html. This is only 1 set:

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>';

I am trying to give an alert when the button is clicked. The alert should contain the title and date of the specific $row of data.

This is my jQuery code (BUT its not working. I see a blank alert):

$("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);
    });

解决方案

Your line getting the title is fine. The line getting the date is looking for an ancestor element of the button that's a table, but the button isn't in the table, it's just in the div that the table's in. So:

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>

这篇关于遍历jQuery中的HTML DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！