查找直接父 jQuery答案

【问题标题】：Find direct parent jQuery查找直接父 jQuery
【发布时间】：2016-03-03 08:55:21
【问题描述】：

我有一个带有 2 个日期选择器的 html 页面，我必须将所选日期放在日/月/年框中。

当我有 1 个日期选择器时，我的代码可以正常工作，但是当我有 2 个时，日期总是写在第一个

<div class="pickergroup">
    <input name="dateDay01" id="dateDay01"> /
    <input name="dateMonth01" id="dateMonth01"> /
    <input name="dateYear01" id="dateYear01">
    <input name="calendario" class="calendario" id="datepicker01">
</div>
<div class="pickergroup">
    <input name="dateDay02" id="dateDay02"> /
    <input name="dateMonth02" id="dateMonth02"> /
    <input name="dateYear02" id="dateYear02">
    <input name="calendario" class="calendario" id="datepicker02">
</div>

还有日期选择器：

    $(function () {
    $(".pickergroup").find('[id^="datepicker"]').datepicker({
        firstDay: 0,
        monthNames: ['January', 'February', 'March',
        'April', 'May', 'June',
        'July', 'August', 'September',
        'October', 'November', 'December'
        ],
        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
        dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
        dateFormat: 'dd-mm-yy',
        onSelect: function (selectedDate) {
            var mycontainer = $(this).parent('.pickergroup');
            var id = $(this).attr('name').substring(10,12);
            var selectedDay = selectedDate.substring(0, 2);
            var selectedMonth = selectedDate.substring(3, 5);
            var selectedYear = selectedDate.substring(6);
            mycontainer.find('#dateDay' + id).val(selectedDay);
            mycontainer.find('#dateMonth' + id).val(selectedMonth);
            mycontainer.find('#dateYear' + id).val(selectedYear);
        }
    });
});

点击date02时如何选择正确的父级？

【问题讨论】：

为什么两者都有相同的 id "datepicker"？
对两个日期选择器使用不同的id。

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

这两个日期选择器具有相同的 id，因此 JavaScript 代码无法选择它们。给每个日期选择器一个不同的 ID。

【讨论】：

他们仍然有相同的 ID - "datepicker01"
当然 - 将“查找”行更改为新的所需 id：find('[id^="datepicker"]') >> find('[id^="datepicker01"] ')
哦，是的！更新帖子是个错误！
现在将“查找”修复为正确的 id。现在可以用了吗？

【解决方案2】：

我认为您不需要 id="datepicker"，如果有 2 个具有相同 id 的元素是不好的。你可以试试这个

$(function() {
   $(".pickergroup").find(".calendario").datepicker({
      firstDay: 0,
      monthNames: ['January', 'February', 'March',
      'April', 'May', 'June',
      'July', 'August', 'September',
      'October', 'November', 'December'
       ],
       dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
       dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
       dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
       dateFormat: 'dd-mm-yy',
      onSelect: function( selectedDate ) {
           var mycontainer = $(this).parent('.pickergroup');
           var selectedDay = selectedDate.substring(0,2);
           var selectedMonth = selectedDate.substring(3,5);
           var selectedYear = selectedDate.substring(6);
           mycontainer.find('[id^="dateDay"]').val(selectedDay);
           mycontainer.find('[id^="dateMonth"]').val(selectedMonth);
           mycontainer.find('[id^="dateYear"]').val(selectedYear);
       }
    });
   });

【讨论】：