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

一些建议：

更正您的html语法，使用

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

而不是

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

您的元素ID horribleHorribleLongIdTxtFrom两次进入同一页面，你打破了html规则。

使用jquery查找输入元素

2 个答案: