使用 jQuery Mobile 遍历 HTML DOM 树

Posted 2023-05-09

【中文标题】使用 jQuery Mobile 遍历 HTML DOM 树

【英文标题】：HTML DOM Tree traversal using jQuery Mobile

【发布时间】：2014-09-20 04:38:59

【问题描述】：

我有一个这样的 html DOM 结构。我想访问“ctitle”、“daytime”和“vv”中的文本。我在<button> 的位置。如 $(this) = 按钮：

注意：<ul>....</ul> 中的 DOM 元素是重复的

<ul id="classes">
  <li class="ctitle" />
  <li class="cschedule">
    <table>
     <tr/>
     <tr>
      <td class="vv" />
     </tr>
     <tr>
      <td class="daytime">
     <tr>
    </table>
  </li>
  <li>
    <button />
  </li>
</ul>

这是我的努力，但没有一个有效。

ctitle= $(this).closest("#classes").find(".ctitle").text();
vv = $(this).closest("#classes").find("table .vv").text();
daytime = $(this).closest("#classes").find("table .daytime").text()

【问题讨论】：

如果您从有效的 HTML 开始，它可能更容易，为什么要搜索 ID，它是唯一的。

【参考方案1】：

根据您的示例 html，并假设它的生成方式有一些结构，因此顺序始终相同：

var cschedule = $(this).parent().prev()
var vv = cschedule.find('.vv')
var daytime = cschedule.find('.daytime')
var ctitle = cschedule.prev()

【讨论】：

我在我的<ul> 中有一个ctitle 元素的重复，所以使用你的方法也给了我其他ctitles 的文本

与.vv和.daytime的其他元素相同

好吧，这改变了一些事情，有些不对劲，如果某些格式的元素重复，那么它们本身可能应该是项目？无论如何，我根据这个更新更新了我的答案，它假设格式是可预测的，希望你的 html 中没有更多的惊喜 :)

是的，它适用于第一个元素，但不适用于第二个元素。这是我的页面：i.cs.hku.hk/~hsbashir/Project_Work/Timetable_schedule/…