将此内容替换为下一个onLoad的id

时间:2018-06-15 13:08:22

标签: jquery html

根据下表,第一个<td>的内容应替换为下一个td.input的{​​{1}}(分割ID后的第二个值)。

id

这样第一个<table> <colgroup> <col width="100" /> <col width="100" /> </colgroup> <tbody> <tr> <td>Element</td> <td>Value</td> </tr> <tr> <td><span>one</span></td> <td id="test"><span><input id="rjaxWMQBmoH-HllvX50cXC0-val" name="entryfield" title="element" value="[ one ]" /></span></td> </tr> </tbody> </table> 在加载时变为<td>。 我可以在<td><span>HllvX50cXC0</span></td>下看到列出它的方法$(this).next(),但我想知道这是否是正确的方法?

1 个答案:

答案 0 :(得分:2)

您的问题的几个方面以及您的标记会使这一点变得不那么明确,但下面评论的jQuery会执行您所要求的内容。

&#13;
&#13;
// no-conflict-safe document ready
jQuery(function($) {
  // loop through all inputs contained inside of a td
  $('td input').each(function() {
    // load the id of the input
    var id = $(this).attr('id');
    // if the id exists, and has a - in it, then....
    if (id && id.indexOf('-') > 0) {
      // split the id into parts (regex would also work here)
      id = id.split('-');
      // get the second part of the id
      id = id[1];
      // put the id into the previous cell's contents
      $(this).closest('td').prev('td').find('span').text(id);
    }
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <colgroup>
    <col width="100" />
    <col width="100" />
  </colgroup>
  <tbody>
    <tr>
      <td>Element</td>
      <td>Value</td>
    </tr>
    <tr>
      <td><span>one</span></td>
      <td id="test"><span><input id="rjaxWMQBmoH-HllvX50cXC0-val" name="entryfield" title="element" value="[ one ]"     /></span></td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

有一些方法可以解决这个问题,这只是一个。

jQuery的关键是使用好的选择器,以及对首选DOM导航功能的清晰理解。我强烈建议使用closestfind(而不是parentparentschildren,这些问题通过使用close / find来避免。