如何使用JQuery在输入中选择其孩子在最后一个不为空的父级的上一个兄弟姐妹

Posted 2023-05-09

【中文标题】如何使用JQuery在输入中选择其孩子在最后一个不为空的父级的上一个兄弟姐妹

【英文标题】：How to select previous sibling of a parent whose child is last among the input which are not null, using JQuery

【发布时间】：2017-06-17 21:56:37

【问题描述】：

我这里有一个有点复杂的情况，尽管我很努力，但还是找不到合理的解决方案。所以我把它放在这里。我有 javascript、jQuery 和 html 以及以下详细信息：

var lastDateIndex ='';
function datecheck()
lastDateIndex = $('td, input[name=date]:not(:empty):last').prev('[name=index]');

alert(lastDateIndex.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table1'>
       <tr id='row1'>
         <th>Index</th>
         <th>Date</th>
         <th>Description</th>
         <th>Payment</th>
         <th>Balance</th>
       </tr>
       <tr id='row2' name='row'>
         <td name='index'>1</td>
         <td name='rowdate'><input type="date" title="date1" name="date" onblur="datecheck();"></td>
         <td name='description'><input title="description1" name="description"></td>
         <td name='description'><input title="paymentpay1" name="paymentpay"></td>
         <td name='description'><input title="balance1" name="balance"></td>
       </tr>
       <tr id='row3' name='row'>
         <td name='index'>2</td>
         <td name='rowdate'><input type="date" title="date2" name="date" onblur="datecheck();"></td>
         <td name='description'><input title="description2" name="description"></td>
         <td name='description'><input title="paymentpay2" name="paymentpay"></td>
         <td name='description'><input title="balance2" name="balance"></td>
       </tr>
       <tr id='row4' name='row'>
         <td name='index'>3</td>
         <td name='rowdate'><input type="date" title="date3" name="date" onblur="datecheck();"></td>
         <td name='description'><input title="description3" name="description"></td>
         <td name='description'><input title="paymentpay3" name="paymentpay"></td>
         <td name='description'><input title="balance3" name="balance"></td>      
      </tr>
     </table>

此表有许多输入字段，所有输入字段都由用户根据自己的需要填写。我需要在最后一个tr 中选择td 和name='index'，其中td 和input[name='date'] 不为空。换句话说，如果用户在tr 和id='row2' 内的input[name='date'] 和[title='date1'] 中输入了日期详细信息，并且将所有剩余行留空，我想选择name='index' 内@ 内的html 987654333@ 和id='row2'。

我上面写的函数只警告1，即使除了最后一行之外的所有行都被填满了。我怎样才能用空的name='date' 获得最后一个tr 的name='index' 的html 的答案？

【参考方案1】：

据我所知，仅使用选择器是无法做到的，因此请考虑以下几点：

如果用户在input[name='date'] 中写入值，请更新其父TD 并添加class/data-* 属性（例如：addClass('date-isnt-null')）。

使用以下选择器：

$('.tr:last-child td.date-isnt-null[name="index"]');

【参考方案2】：

如果您在调用函数时想要输出所有输入日期的行，您可以使用：

function datecheck() 
  $('input[name=date]').each(function(i, el) 
    if ($(el).val()) 
      console.log($(el).parents('tr').find('[name=index]').html());
    
  );

（不确定是否理解最后一个索引位）。

至于 Ofir Baruch 的建议，这里有一个方法：

$(function() 
  $('input[name=date]').bind('blur', function() 
    if ($(this).val())
       $(this).parent('td').addClass("dirty");
     else 
       // in case the user removes the date
       $(this).parent('td').removeClass("dirty"); 
    
  );
);

function datecheck() 
   var html = $('.tr:last-child td.dirty[name="index"]').html();
   console.log(html);

在输入日期模糊时，如果用户输入了日期，我们会将 dirty 类添加到其父级。

【讨论】：

每个中的第一个是name='index'，如果name='date'的 为空，我想输出它的html。