使用 jquery 查找输入元素

Question

我试图显示两个包含日期的输入字段之间的天数差异。我几乎无法更改 HTML，所以我必须使用 Javascript 来做到这一点。 HTML 非常丑陋。我只能使用 jQuery 1.3.2。

HTML：

<div id="longUnreadableUnidentifiableId">
  <div class="dynamic">
    <div class="row">
      <span class="column">
        <input id="horribleHorribleLongIdTxtFrom" type="text">11/02/2002</input>
      </span>
      <span class="colum">
        <input id="horribleHorribleLongIdTxtUntil" type="text">16/12/2010</input>
      </span>
      <div class="diff"> [diff] </div>
    </div>
  </div>

<div id="longUnreadableUnidentifiableId2">
  <div class="dynamic">
    <div class="row">
      <span class="column">
        <input id="horribleHorribleLongIdTxtFrom" type="text">03/03/2003</input>
      </span>
      <span class="colum">
        <input id="horribleHorribleLongIdTxtUntil" type="text">16/12/2010</input>
      </span>
      <div class="diff"> [diff] </div>
    </div>
  </div>

当某一行的任何一个日期发生变化时，它们之间的差异应该会显示出来。我正在使用 moment.js 作为日期差异。

以下 javascript 尝试查找关联的输入字段并提醒它们之间的差异。但是，我无法找到第二个输入字段（var until）。

Javascript：

$('input[id*="txtFrom"]').live('change', function() { 
    var from = $(this);
    var until = from.parent(".row").find('input[id*="txtUntil"]');

    a = moment(from.val());
    b = moment(until.val());

    alert(b.diff(a, 'days'));
});

有人能解决这个问题吗？也许更优雅的东西？

Answer 1

尝试使用parents 而不是parent。 parent 只检查直接父级，而parents 检查所有父级。

Answer 2

一些建议：

1. 更正你的html语法，使用

   <input id="horribleHorribleLongIdTxtFrom" type="text" value="11/02/2002"></input>
   

   而不是

   <input id="horribleHorribleLongIdTxtFrom" type="text">11/02/2002</input>
   

2. 您的元素 ID horribleHorribleLongIdTxtFrom 出现两次 同一页面，您违反了 html 规则。