jQuery 循环遍历对象并查找标题但跳过其他标题

Question

我一直在自学 JS 和 Jquery，但我仍然在努力解决如何有效地使用 $ 循环对象并提取我想要的信息。

我有一个表格，其中有一个标志图标和一个描述我想放在行末尾的标题。然而，有时我必须忽略其他图标。因此，我在 url 中查找“标志”，如果存在，我将第二个到最后一个单元格的 innerHTML 设置为“标题”。

正如您在下面看到的，我必须创建一个递减 VAR y，以防止在遇到非标志图标时跳到带有“标题”的下一行。

我希望这一行附加“标题”，即位置：

<td>11:44pm</td><td><a href="/stats/visitors?site_id=66351439&amp;date=2011-04-27&amp;country=the+united+states"></a></td><td> <a class="custom" title="Comcast Cable" href="/stats/visitors?site_id=66351439&amp;date=2011-04-27&amp;ip_address=75.70.103.23">Comcast Cable</a></td><td><a href="/stats/visitors-actions?site_id=66351439&amp;date=2011-04-27&amp;session_id=228613269">1 action</a></td><td>10s</td><td width="100%"> &nbsp; </td><td></td>

看起来像这样：

<td>11:44pm</td><td><a href="/stats/visitors?site_id=66351439&amp;date=2011-04-27&amp;country=the+united+states"></a></td><td> <a class="custom" title="Comcast Cable" href="/stats/visitors?site_id=66351439&amp;date=2011-04-27&amp;ip_address=75.70.103.23">Comcast Cable</a></td><td><a href="/stats/visitors-actions?site_id=66351439&amp;date=2011-04-27&amp;session_id=228613269">1 action</a></td><td>10s</td><td width="100%">Aurora, CO, USA</td><td></td>

所以我的问题 - 什么是完成整个过程的更好方法。这是 jsfiddle 的链接 - http://jsfiddle.net/ukJxH/78/ -在 3:47 您可以看到一个非旗帜图标。

var x = $('.tableborder tr img');
y = 1;
for (i = 0; i < x.length; i++) {
    var flagg = x[i].src;
    var pattn = /flag/gi;
    var loca = x[i].title;

    if (flagg.match(pattn) == "flag") {
        //$('td:nth-child(6)')[i + 14 + y].innerHTML = loca;
        $('#main :nth-child(i) td:nth-child(6)')[i].innerHTML = loc } else {
    y = y - 1;
}

}

Answer 1

抱歉，但我不确定我是否太理解你的问题。但是，以下选择器将为您提供表中的所有标志

$('.tableborder tr img[src*="flag"]').each(function(){
   $(this)
    .closest('td')
    .nextAll('td:last')
    .html('Title from image : ' + $(this).attr('title'));
});

这应该让您有机会遍历 DOM 并获得您需要的内容

实时演示：http://jsfiddle.net/jomanlk/ukJxH/87/

Answer 2

您可以尝试使用 each

例如：

$(".tableborder tr img").each(function() {
   var src = $(this).attr("src");
   var alt = $(this).attr("alt");
});

Answer 3

您还可以使用 css 类仅选择您感兴趣的 img 标签：

$(".tableborder tr img.flagImg").each(function() {
   ...
});

然后 HTML 将是

<img title="Arvada, CO, USA" class="flagImg" src="http://static.getclicky.com/media/flags/us.gif">