使用jQuery查找和删除“sibbling”

Question

我有一个1到1000个日期时间选择器的表单，它不是固定数量的表单。现在我需要在每一个上设置minDate和maxDate，它应该只与它的“sibbling”进行比较。

我试图添加名为sibbling的属性，但这可能不正确。

下面的代码是我提出的但是有jQuery问题（this.attr（“sibbling”））。val ...

这是HTML

<p>
    Number 1
    <input id="startdate0" type="text" sibbling="enddate0" />
    <input id="enddate0" type="text" sibbling="startdate0" />
</p>
<p>
    Number 2
    <input id="startdate1" type="text" sibbling="enddate1" />
    <input id="enddate1" type="text" sibbling="startdate1" />
</p>
<p>
...
</p>
<p>
    Number 1000
    <input id="startdate1000" type="text" sibbling="enddate1000" />
    <input id="enddate1000" type="text" sibbling="startdate1000" />
</p>

这是代码

<script language="javascript" type="text/javascript">
    $("input[id^='startdate']").datetimepicker({
        onShow: function(ct) {
            this.setOptions({
                // this is how you usually do: maxDate:jQuery('#enddate').val()?jQuery('#enddate').val():false
                maxDate: jQuery(this.attr("sibbling")).val() ? jQuery(this.attr("sibbling")).val() : false
            })
        }
    });
    $("input[id^='enddate']").datetimepicker({
        onShow: function(ct) {
            this.setOptions({
                // this is how you usually do: minDate:jQuery('#startdate').val()?jQuery('#startdate').val():false
                minDate: jQuery(this.attr("sibbling")).val() ? jQuery(this.attr("sibbling")).val() : false
            })
        }
    });
</script>

Answer 1

您可以使用.next()，.prev()查找下一个/上一个兄弟。

以下是模拟：

JSFiddle

function createHTML() {
  var html = "";

  for (var i = 0; i < 5; i++) {
    html += '<p>' +
      'Number ' + (i + 1) +
      '<input class="startDate" id="startdate' + i + '" type="text" />' +
      '<input class="endDate" id="enddate' + i + '" type="text" />' +
      '</p><br/>';
  }
  $("#content").html(html);
}

function registerEvents() {
  $(".startDate").on("blur", function() {
    console.log($(this).next().val());
  });
  $(".endDate").on("blur", function() {
    console.log($(this).prev().val());
  });
}

createHTML();
registerEvents();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content"></div>