javascript - jQuery 在 DOM 中为不同的父级输入下一个输入

Question

我有一组 Angular 色输入和每个单独 Angular 色的最大注册输入。我试图找到一种优雅的方法来选择 DOM 中的下一个输入，无论父级如何。我的最终目标是仅在“选中”匹配 Angular 色输入时将 max_registrations[] 输入设置为禁用，但是我在 jQuery 中匹配该元素时遇到问题。

代码:

        @foreach ($roles as $role)
            <div class="row">
                <div class="col">
                    <input type="checkbox" name="roles[]" value="{{ $role->id }}" 
                        onchange="console.log($(this).parent().siblings().first().children('input').attr('name'))"
                    >&nbsp;{{ $role->name }}
                </div>
                <div class="col input-group input-group mb-2">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Max Registrations:</span>
                    </div>
                    <input type="number" name="max_registrations[]" value="" class="form-control" >
                </div>                    
            </div>             
        @endforeach

说明: Roles[] 是一个复选框。 max_registrations[] 是一个数字输入。我每行都有几个。当检查第一个 Roles[] 时，应禁用/启用第一个 max_registrations[]。 我使用 Laravel Blade 作为我的模板语言，Bootstrap 作为我的前端模板，并且希望使用内联 jQuery 来实现这一点。

我已经尝试过:

next('input')......仅适用于 sibling

nextAll('input')...这似乎应该有效，但我不知道如何实现

closest('input')....也不确定为什么这不起作用。

现在我选择了parent..siblings..first..children('input')方法，但感觉很丑。

感谢您的任何意见。

Answer 1

您可以编写自己的 jQuery 函数来选择下一个 DOM 元素。

为什么您的其他建议不起作用:

• closest() 将选择第一个匹配的父级。
• next() 确实会选择下一个同级。
• nextAll() 将选择所有下一个同级。

当目标是选择器的一部分时有效

此函数将为 jQuery 选择中的每个对象选择与给定选择器匹配的下一个元素。

如果您希望它与任何选择器一起使用，请检查第二个代码段。

jQuery.fn.nextInDom = function(selector){
  //create an empty return object
  var $returnCollection = $([]);
  //loop over the elements in the jQuery object
  this.each(function(){
    //find elements that match the given selector and loop over those
    $targetCollection = selector ? $(selector) : $('*');
    $targetCollection.each((i, el) => {
      //when the target is found in the selector select the next element and add it to the return collection
      if(el === this) {
        if($targetCollection.length > i) {
          $returnCollection = $returnCollection.add($targetCollection.eq(i+1));
        }
      }
      //jQuery version of continue to exit the each loop for better performance
      return;
    });
  });
  return $returnCollection;
}

$('.target').nextInDom('input').css('background-color', 'yellow');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input value="target1" class=target>
</div>
<div>
  <input value="should become yellow (next)">
</div>
<div>
  <input value="no change">
</div>
<div>
  <input value="no change">
</div>

<div>
  <input value="target2" class=target>
</div>
<div>
  <input value="should become yellow (next)">
</div>
<div>
  <input value="no change">
</div>
<div>
  <input value="no change">
</div>

适用于任何选择器

即使目标不是选择器的一部分，以下内容也应该起作用。然而，它可能会导致大 dom 上的性能不佳，因为它会循环 DOM 中的所有元素。 谨慎使用!

jQuery.fn.nextInDom = function(selector){
  //create an empty return object
  var $returnCollection = $([]);
    //loop over the elements in the jQuery object
  this.each(function(){
    //get all elements in the dom and loop over them
    var $dom = $('*');
    $dom.each((i, el) => {
      var $elementsAfter;
      //when target is found filter the dom collection on only elements after current one
      if(el === this) {
        $elementsAfter = $dom.filter((j) => {
          return j > i;
        });
        //filter another time with the given selector if defined
        if(selector) {
          $returnCollection = $returnCollection.add($elementsAfter.filter(selector).first());
        }
        else {
          $returnCollection = $returnCollection.add($elementsAfter.first());
        }
      }
      //jQuery version of continue to exit the each loop for better performance
      return;
    });
  });
  return $returnCollection;
}

$('.target').nextInDom('div').css('background-color', 'yellow');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input value="target1" class=target>
</div>
<div>
  <input value="div should become yellow (next)">
</div>
<div>
  <input value="no change">
</div>
<div>
  <input value="no change">
</div>

<div>
  <input value="target2" class=target>
</div>
<div>
  <input value="div should become yellow (next)">
</div>
<div>
  <input value="no change">
</div>
<div>
  <input value="no change">
</div>