获取Anchor的下一个元素

时间:2016-04-29 03:42:44

标签: javascript jquery html html5

如何通过搜索锚标记

来更改下一个元素(td)的值

我有这个HTML代码

<TR>
<TD>
   <DIV align=center>4</DIV>
</TD>
<TD>
    <DIV align=left>
        <A href="sample.asp?list=1&amp;vote=1">Juan Dela Cruz</A>
    </DIV>
</TD>
<TD>25</TD>
</TR>

我有这个javascript

<SCRIPT>
    setTimeout(function() {
        var searchString = 'Juan Dela Cruz';
        var elements = document.getElementsByTagName('a');
        for (var i = 0; i < elements.length; i++)
            if (elements[i].innerHTML.indexOf(searchString) !== -1)
               elements[i].nextSibling.innerHTML = getRandomInt(200,250);
    }, 200);


    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
</SCRIPT>

然后,我想搜索通过名称'Juan Dela Cruz'的锚点(a)标签列表。然后用它来获取它的下一个元素..这样我就可以在td标签内部改变值25

使用该名称搜索锚标记工作得很好,我在获取下一个元素时遇到问题... 我在.nextSibling中出错。有人可以帮我修复这段代码吗?谢谢:))

1 个答案:

答案 0 :(得分:2)

您可以尝试以下代码段:

主要的是你需要关心closest()以获得下一个td兄弟姐妹。此closest("td")将返回您最近的父td元素。在那里,您可以使用td获取下一个next("td")元素。

Fiddle Demo

&#13;
&#13;
$(function() {
  setTimeout(function() {
    var searchString = 'Juan Dela Cruz';
    $("a").each(function() {
      if ($(this).text() == searchString) {
        $(this).closest("td").next("td")[0].innerHTML = getRandomInt(200, 250);
      }
    })
  }, 200);

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
  <TR>
    <TD>
      <DIV align=center>4</DIV>
    </TD>
    <TD>
      <DIV align=left>
        <A href="sample.asp?list=1&amp;vote=1">Juan Dela Cruz</A>
      </DIV>
    </TD>
    <TD>25</TD>
  </TR>
</table>
&#13;
&#13;
&#13;