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并在<dv>

周围包裹额外的<ul>

因此closest('div')与您的来源不同。

试试这个：

将data-title添加到您的h5

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

的 DEMO

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 个答案: