使用javascript从div树访问html元素

我需要从一些img元素中访问title值，但这些元素在div树中得到了深入的实现，然后在一些表中实现。 让我解释一下我为什么需要它们： 我使用一个门户，在那里我有来自网络的电路信息。此入口包含一些位置，其中有几行2-3通常->该位置的回路。每一行都以一个img元素开始，在title属性上可以有几个值。如果标题值为！=没有警报，然后我必须从该行获取所有数据，我想通过右下角靠近时钟的弹出式通知显示它们。 下面是如何组织所有位置的html元素的屏幕截图。 下面是如何组织位置的屏幕截图：

例如，如果title attribute==Warning，我必须从同一个表中的下一个td中获取数据。每个td都有一个没有id的div。每个表上的前两个td在div中有另一个元素：第一个是img，第二个是a href。 我画这棵树是为了告诉你html元素是如何组织的

<table class="x-grid3-row-table">
  <tbody>
    <tr>
       <td> <!--first td, this contains div->img-->
          <div class="x-grid3-cell-inner x-grid3-col-0">
             <img .... title="No alarms">
          </div>
       </td>
       <td> <!--second td, this contains div->a href-->
          <div class="x-grid3-cell-inner x-grid3-col-1">
             <a href...>
          </div>
       </td>
       <td> <!--3rd td, this contains div->string:Text1-->
          <div class="x-grid3-cell-inner x-grid3-col-2">Text1</div>
       </td>
       <td> <!--4th td, this contains div->string:Text2-->
          <div class="x-grid3-cell-inner x-grid3-col-2">Text2</div>
       </td>
       ...
    </tr>
  </table>

……等等。我确信这种语法是不正确的，但我认为应该有一种方法来获取数据

我希望现在的解释比第一次更好。 编辑 伙计们，非常感谢你们。你帮了我很多。你的代码正在工作。 不管怎样，我只想问你一件事。 3分钟后，整个表都在刷新，之后我找不到重新加载函数的方法。刷新内容时，div ext-gen24将保持为空，然后重新填充内容： 刷新时间：

<div class="x-grid3-body" style="width: 1877px;" id="ext-gen24"></div>    

刷新完成后

<div class="x-grid3-body" style="width: 1877px;" id="ext-gen24">content</div>    

---

你能帮我做一个你认为在这种情况下应该可以使用的函数吗？

如果你的Div树有相同格式的类，现在你可以使用这样的函数

var title = $('.x-panel-bwrap').find('img').attr('title');

或者，如果没有确认div类的依赖关系，那么假设img标记将始终具有以“tick”开头的类名，则可以使用此选项

var title = $('img *[class^="tick"]').attr('title');

编辑

既然你已经更清楚地解释了你的问题，我已经包括了你需要的解决方案。现在，您必须扩展它，以更紧密地适应您的代码。 例如，如果要单独记录每个位置，请首先在这些位置中循环，然后查找其中的表。 基本上，您可以使用Jquery.find和.each来浏览您的comeplete html并根据需要执行任何操作

var tableList = $('.x-grid3-row-table');
tableList.each(function() {
    var imgTitle = $(this).find('img').attr('title');
    alert(imgTitle);
    if (imgTitle == 'Warning') {
        infoTd = $(this).find('td:nth-child(3)');
        text = infoTd.find('div').text();
        alert(text);
    }
});

---

您需要循环浏览html的多个阶段：组、表和列：

var groups = $('.x-grid-group-body'); //hopefully all the '#ext-gen15-gp-location-X-bd' div have 'x-grid-group-body' as the class
groups.each(function () {
    var tables = $(this).find('table');
    tables.each(function () {
        var columns = $(this).find('td');
        var image = $(columns[0]).find('img');
        var title = image.attr('title');

        if (title !== 'No alarms') {
            var allInnerHtml = '';
            for (var i = 1; i < columns.length; i++) {
                allInnerHtml += $(columns[i]).find('div').html() + '\n';
            }
            alert(allInnerHtml);
        }
        else {
            //just to show that titles with 'No alarm' are skipped
            alert('skipped');
        }
    });
});

见更新

---

希望有帮助=

$div看起来像jQuery—您正在使用它吗？是的，这是jQuery。但我也使用了：document.getElementByIdmdiv.style.background=red；在id ext-gen15-gp-location-AMSTERDAM5999，它停止工作是什么意思？您可以发布用于测试的选择器/javascript吗？类似于$'ext-gen15-gp-location-AMSTERDAM5999-bd table img'的东西应该可以完成这项工作，假设您已经设置了唯一的ID，这是您真正应该做的。我使用document.getElementByIdext-gen15-gp-location-AMSTERDAM5999-bd.style.background=red，并且该字段确实更改了颜色。第一个想法不起作用。第二个不适用，因为类可以是tick_16、err_16、warn_16。我重新设计了我的主要帖子。我认为现在的解释比最初的解释更好。你觉得怎么样，有什么想法吗？现在已经很清楚了。我已经对我的答案进行了编辑，以包含一个JS FIDLE，其中包含了您需要的精确解决方案。我们可以使用jquery查找并在表中循环。我将在明天尝试这个，并添加我的反馈。感谢3个分区，ID和类可以是什么，或者它们是特定的吗？他们都是兄弟姐妹吗？这是可行的，但我需要逐一检查。当div id=ext-gen15-gp-location-AMSTERDAM5999时，有10多个条目，每个条目包含2个子条目。这将是更容易添加一个形象，但我没有至少10在声誉。该div包含表，每个表包含一些具有重要值的td元素，因此我必须知道在div id=ext-gen15-gp-location-AMSTERDAM5999-bdI之后一个接一个访问元素的方法。我非常感谢您的帮助，但我必须离开办公室，我必须赶火车。当我到家时，我会上传2-3个IMG。感谢您的理解和耐心。我添加了一些图片。如果你需要更多的信息来了解事实，请告诉我。对不起，我没有忘记这一点。我只是还没来得及研究它并编写解决方案。

var groups = $('.x-grid-group-body'); //hopefully all the '#ext-gen15-gp-location-X-bd' div have 'x-grid-group-body' as the class
groups.each(function () {
    var tables = $(this).find('table');
    tables.each(function () {
        var columns = $(this).find('td');
        var image = $(columns[0]).find('img');
        var title = image.attr('title');

        if (title !== 'No alarms') {
            var allInnerHtml = '';
            for (var i = 1; i < columns.length; i++) {
                allInnerHtml += $(columns[i]).find('div').html() + '\n';
            }
            alert(allInnerHtml);
        }
        else {
            //just to show that titles with 'No alarm' are skipped
            alert('skipped');
        }
    });
});