遍历每个元素并存储为变量

时间:2019-03-11 14:27:27

标签: jquery html css

我有一个系统生成的表,该表在每个行元素中都包含链接。这些链接中的每一个在链接末尾都有一个唯一的4位数字值。

目标是遍历每个表元素,获取其持有的链接,然后将链接切成最后4个字符。

我现在正在运行此

HTML

<td class="lc_Cell">
    <p>
        <a href="thelink">Link #1</a>
    </p>
</td>
<td class="lc_Cell">
    <p>
        <a href="thelink">Link #2</a>
    </p>
</td>
<td class="lc_Cell">
    <p>
        <a href="thelink">Link #3</a>
    </p>
</td>
<td class="lc_Cell">
    <p>
        <a href="thelink">Link #4</a>
    </p>
</td>

jQuery

var TRLink = $(".lc_Cell > p > a").attr("href");   //The original URL the program spits out
var TR_ID = TRLink.slice(-4);   // Storing just the 4 digits I need
var NewLink = $(".lc_Cell > p > a").attr("href","mynewlinktosendsomeoneto"+ TR_ID); 
// my new link that utilizes the 4 characters from the original

这种工作方式...初始变量存储它找到的第一个实例的链接(在我的实际代码中还有3个)。当我创建NewLink变量时,它将覆盖所有出现的事件。

在一个理想的世界中,我将遍历并存储原始链接,进行切片,然后遍历并为每个链接重新构建一个新链接。

我遇到了jQuery中的“ each。()”命令,但运气不好,无法自行解决。

非常感谢您的帮助!

1 个答案:

答案 0 :(得分:3)

要实现此目的,您可以使用map()来构建所有相关href元素的a属性的后四个字符的数组:

var ids = $('.lc_Cell a').map(function() {
  return this.href.slice(-4);
}).get();

console.log(ids);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="lc_Cell">
      <p>
        <a href="thelink1234">Link #1</a>
      </p>
    </td>
    <td class="lc_Cell">
      <p>
        <a href="thelink2345">Link #2</a>
      </p>
    </td>
    <td class="lc_Cell">
      <p>
        <a href="thelink3456">Link #3</a>
      </p>
    </td>
    <td class="lc_Cell">
      <p>
        <a href="thelink4567">Link #4</a>
      </p>
    </td>
  </tr>
</table>

话虽如此,鉴于您打算更新href元素上的a属性,在这种情况下为attr()提供一个函数可以用来返回更有意义。基于当前值的新值。像这样:

$('.lc_Cell a').attr('href', function(i, href) {
  var id = href.slice(-4); 
  return 'mynewlinktosendsomeoneto' + id; 
});