无法使用jQuery获取HTML DOM元素

Question

I am trying to get the text of one of the elements and show it up on an alert but its not working for me. 我正在尝试获取其中一个元素的文本，并在警报中显示它，但对我不起作用。 The element in question is <h5 class="title"> . 有问题的元素是<h5 class="title"> 。 Here is my html code: 这是我的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

Your issue is that since you are using jQuery mobile, it is restructuring the DOM and wrapping an extra <dv> around your <ul> 您的问题是，由于您使用的是jQuery mobile，因此它正在重组DOM，并在<ul>周围包裹了一个额外的<dv> <ul>

Thus the closest('div') is different than the one in your source. 因此， closest('div')与源代码中的那个不同。

Try This: 尝试这个：

Add data-title to your h5 为您的h5添加data-title

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

And change JS to: 并将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);
});

DEMO 演示

Answer 2

Apparently, jQuery mobile will wrap some elements with a div, in this case, the <ul data-role="list-view"> . 显然，jQuery mobile将用div包装一些元素，在这种情况下，是<ul data-role="list-view"> 。 Therefore, running .closest('div') will refer to the generated div, instead of the one that contains the h5 . 因此，运行.closest('div')将引用生成的div，而不是包含h5 div。

To fix this, add your own class to the div. 要解决此问题，请将您自己的类添加到div中。

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

Then, use your class to refer to it. 然后，使用您的类来引用它。

jQuery mobile adds a further complication: it adds extra text that will be read by the .text() function. jQuery mobile进一步增加了复杂性：它添加了额外的文本，这些文本将由.text()函数读取。 We need to store the text we need first before jQuery mobile adds text to the page. 在jQuery mobile将文本添加到页面之前，我们需要存储我们首先需要的文本。

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

Then, we need to read the text we need from a data attribute instead of using .text() . 然后，我们需要从数据属性读取所需的文本，而不是使用.text() 。

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

Answer 3

I've updated my answer. 我已经更新了答案。 your code works fine. 您的代码工作正常。 my bad. 我的错。 hehehe. 呵呵呵。

$("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