jQuery : How to iterate in all links of a specific table row

Question

假设这是我的 table

<table border="1" id="tbl">
    <tr class="clsHead">
        <td>
            <a href="b.aspx">first row first cell</a>
        </td>
        <td>
            <a href="b.aspx">first row second cell</a>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <a href="">seconde row</a>
        </td>

    </tr>
</table>

我尝试了这个jquery，但没有按预期工作。我试图更改或修改表行中具有类名 clsHead

的链接的 href

$(document).ready(function () {
    $(".clsHead").each(function () {
    alert($(this).attr('href'));
        $(this).attr('href',$(this).attr('href')+'&qString=1') ; 
    });
});

如果可能的话请告诉我哪里出错了。谢谢

Answer 1

您正在尝试获取/设置每个 .clsHead 元素的 href 属性，因为它们没有 href 属性，这显然不起作用。

您需要选择后代 a 元素:

$(".clsHead a").each(function() {
  $(this).attr('href', $(this).attr('href') + '&qString=1');
});

尽管仅访问 this 的 href 属性会更短:

$(".clsHead a").each(function() {
  this.href = this.href + '&qString=1';
});

或者不使用 jQuery:

var elements = document.querySelectorAll('.clsHead a');
Array.prototype.forEach.call(elements, function (el)  {
  el.href = el.href + '&qString=1';
});

您可能需要将该逻辑包装在 DOM 加载的事件回调中:

document.addEventListener('DOMContentLoaded', function() {
  var elements = document.querySelectorAll('.clsHead a');
  Array.prototype.forEach.call(elements, function(el) {
    el.href = el.href + '&qString=1';
  });
});