無法使用jQuery獲取HTML DOM元素

Question

我正在嘗試獲取其中一個元素的文本，並在警報中顯示它，但對我不起作用。 有問題的元素是<h5 class="title"> 。 這是我的html代碼：

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="styling.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  <title>Example</title>
</head>
<body>
<div data-iconpos="none" data-role="collapsibleset" data-theme="a" data-content-theme="a">

<div data-role="collapsible" data-collapsed="false">
    <h2><img src="today_calendar.png" style="height: 60px; vertical-align:middle;"> Today's Events</h2>
    <div id="todayCollapsible">

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

    </div>
</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 1

您的問題是，由於您使用的是jQuery mobile，因此它正在重組DOM，並在<ul>周圍包裹了一個額外的<dv> <ul>

因此， closest('div')與源代碼中的那個不同。

嘗試這個：

為您的h5添加data-title

<h5 class="title" data-title="Event Title Two">Event Title Two</h5>

並將JS更改為：

$("body").on('click','button',function(){
  var title = $(this).closest("div").siblings('h5.title').data("title");
  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);
});

演示

Answer 2

顯然，jQuery mobile將用div包裝一些元素，在這種情況下，是<ul data-role="list-view"> 。 因此，運行.closest('div')將引用生成的div，而不是包含h5 div。

要解決此問題，請將您自己的類添加到div中。

<div id="event1" class="event-wrapper" data-role="collapsible" data-collapsed="true">
<!--             ^ Here                                                           -->

然后，使用您的類來引用它。

jQuery mobile進一步增加了復雜性：它添加了額外的文本，這些文本將由.text()函數讀取。 在jQuery mobile將文本添加到頁面之前，我們需要存儲我們首先需要的文本。

$(document).one('pagebeforecreate', function(){
    $('h5').each(function(){this.dataset.text = this.innerHTML;});
});

然后，我們需要從數據屬性讀取所需的文本，而不是使用.text() 。

var title = $(this).closest(".event-wrapper").find(".title").data('text');
var date =  $(this).closest(".event-wrapper").find("table .date").text();

Answer 3

我已經更新了答案。 您的代碼工作正常。 我的錯。 呵呵呵。

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

無法使用jQuery獲取HTML DOM元素

問題描述

3 個解決方案

解決方案1
3 已采納 2014-07-19 16:46:26

解決方案2
2 2014-07-19 16:46:47

解決方案3
-1 2014-07-19 16:30:50

無法使用jQuery獲取HTML DOM元素

問題描述

3 個解決方案

解決方案1 3 已采納 2014-07-19 16:46:26

解決方案2 2 2014-07-19 16:46:47

解決方案3 -1 2014-07-19 16:30:50

解決方案1
3 已采納 2014-07-19 16:46:26

解決方案2
2 2014-07-19 16:46:47

解決方案3
-1 2014-07-19 16:30:50