Question

我有一个来自Fogbugz错误跟踪系统的网页，并使用Fogbugz的插件，我可以在每个页面中插入javascript。

在这个Fogbugz安装中，我创建了一个自定义字段，其中包含不同系统的案例编号，这将在案例列表中显示。

我想让这个列可以点击，这将打开一个新标签并打开其他系统中的相应案例。

网页中的表格单元格在html中显示如下：

<td class="col_8"><div onmousedown="x(event)"><nobr><span>44468</span></nobr></div></td>

基本上我想把这个号码44468变成一个可点击的链接。

我试过这个jQuery代码：

$(".col_8").html("....");

但这取代了整个TD单元的内容。如果这是最好的方法，那我可以，但我不知道如何参考案例编号，以便链接成为正确的链接。

例如，这可以起作用，它们都成为链接，但为所有案例创建了相同的链接（即，它们都指向相同的案例编号，显然）：

$(".col_8").html("44468");

我改进了它（我正在学习jQuery）：

$(".col_8>div").html("<a href='http://other.system/?44468'>44468</a>");

此外，第一行有一个文本，表示该系统的名称，它有不同的html，只有文字中的字母，我希望该部分保持不变。

任何人都可以告诉我在哪里寻找或谷歌搜索，以找出我需要的东西吗？

由@Nick Craver的answer和评论提供，这是对我有用的最终脚本：

$(".col_8 span").filter(function() {
    return $.trim($(this).text());
}).each(function() {
    $(this).wrap("<a target='_blank' href='http://other.system?" + this.innerHTML + "' />");
});

Answer 1

您可以将功能传递给.wrap()，如下所示：

$(".col_8 span").wrap(function() {
  return "<a href='http://other.system/?" + this.innerHTML + "' />";
});

You can test it out here，结果转向：

<span>44468</span>

分为：

<a href="http://other.system/?44468"><span>44468</span></a>

其余的保持不变。如果标记与您发布的完全不同并且有空格等，则您需要$(this).text()而不是this.innerHTML，也可能需要$.trim()包装。

由于OP在 jQuery 1.3.2 上（以上仅适用于jQuery 1.4+），所以这是该版本：

$(".col_8 span").each(function() {
  $(this).wrap("<a href='http://other.system/?" + this.innerHTML + "' />");
});

You can test it here

Answer 2

您可以使用以下锚点替换范围：

$('.col_8').each(function() {
    var $span = $(this).find('span');
    var id = $span.html();

    $a = $('<a />').attr('href', 'http://other.system/?'+id).html(id);

    $span.replaceWith($a);
});

Answer 3

我没有对此进行测试，但希望它能够接近你所追求的目标：

var spans = $('td.col_8 span'); // Find the spans within the table cells
if (spans && spans.length) { // If we have span tags to work with
  spans.each(function() {
    var span = $(this),
        code = span.text(), // Get the span tag's text node
        anchor;
    if (/^\d+$/.test(code) === true) { // If the text's characters are only digits
      anchor = $('<a href="http://other.system/?' + code + '">' + code + '</a>'); // Create an anchor tag
      span.replaceWith(anchor); // And replace the span with the anchor tag
    }
  });
}

使用jQuery将带有DIV的TD与数字转换成可点击的链接？

3 个答案: