Question

我需要从某些 img 元素中访问 title 值，但这些元素在div树中深度实现，然后在一些表格中实现。

让我解释一下我为什么需要它们：
我使用门户网站，在那里我可以获得有关网络电路的信息。该门户包含一些具有几行的位置（通常2-3个 - 用于该位置的电路）。每行以img元素开头，它可以在 title 属性上有一些值。如果标题值是！=“没有警报”，那么我必须从该行获取所有数据，并且我想通过靠近时钟的右下角的弹出通知显示它们。

下面是一个截图，介绍了如何组织html元素（适用于所有位置）。 http://imageshack.com/a/img661/962/ErjQOt.png

您可以在下面找到有关如何组织地点的屏幕截图： http://imageshack.com/a/img661/7453/QAP5oM.png

例如，如果title属性==“警告”，我必须从同一个表中的下一个td获取数据。每个td都有另一个没有id的div。每个表上的第一个td's在div中有另一个元素：第一个上有 img ，第二个上有一个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>

位置-1有3个电路，这意味着3个表。上面的表插入了div（ div class =“x-grid3-row x-grid3-row-first” from screenshot2）。在另一个div之后还有另外2个表（ div class =“x-grid3-row x-grid3-row-alt”＆amp; div class =“x-grid3-row “来自screenshot2），我必须检查每个表的title属性。

现在我的问题是如何从同一位置的每个表中获取 title 属性？如果标题是！=“没有警报”我如何从该表中的下一个td获取数据？

也许我可以为所有12个位置使用循环，或者我可以逐个获取它们。这没什么大不了的，因为只有12个位置，但每个位置都有令人讨厌的东西，以便从每个电路获取信息。

我认为应该有这样的语法来达到每个html元素并获得正确的值。

var title = $('#ext-gen15-gp-location-1-bd table[0] td[0] img').attr('title');
var title = $('#ext-gen15-gp-location-1-bd table[0] td[1] div[0]').attr('innerHTML');
....
var title = $('#ext-gen15-gp-location-1-bd table[1] td[0] img').attr('title');
var title = $('#ext-gen15-gp-location-1-bd table[1] td[1] div[0]').attr('innerHTML');
...
var title = $('#ext-gen15-gp-location-9-bd table[0] td[0] img').attr('title');
var title = $('#ext-gen15-gp-location-9-bd table[0] td[1] div[0]').attr('innerHTML');
...

......等等。我确信这种语法不正确，但我认为应该有办法获取这些数据。

我希望现在第一次解释得更好。

编辑

伙计们，非常感谢你们。你帮我很多你的代码正在运作。无论如何，我只是想问你别的什么。

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>

你能帮助我一个你认为在这种情况下应该起作用的功能吗？

Answer 1

如果您的Div树具有相同格式的类，现在您可以使用类似的东西。

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

或者如果未确认div类依赖关系，那么假设img标记将始终具有以＆＃39; tick＆＃39;开头的类名，您可以使用它。

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

修改

现在您已经更清楚地解释了您的问题，我已经提供了您需要的解决方案。现在，您必须更加密切地扩展它以适应您的代码。例如，如果要单独记录每个位置，请先开始遍历位置，然后在其中查找表。基本上你可以使用Jquery .find和.each来浏览你的好的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);
    }
});

FIDDLE

Answer 2

你需要循环遍历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');
        }
    });
});

查看更新的 JSFiddle

希望有所帮助！ =）

使用javascript访问div树中的html元素

2 个答案: