перебор элементов в jquery

#javascript #jquery

Вопрос:

У меня есть страница с кучей выпадающих списков, и рядом с каждым выпадающим списком есть кнопка. При первоначальной загрузке страницы я хочу, чтобы все кнопки были отключены, и если есть изменение в определенном раскрывающемся списке, то соответствующая кнопка должна быть включена.

Для этого у меня есть следующий код, но мне нужно знать, как перебирать все выпадающие списки и кнопки, чтобы я мог обобщить его.

 $(document).ready(function () {
  //disable all buttons
  function disableAllButtons () {
      $(':input[type=button]').attr("disabled", "true");
  }
  disableAllButtons();
  //enable button when drop down changes
  $(':input[name=sNewPKvalue1]').focus(function() {
      disableAllButtons();
      $(':input[name=Update0]').removeAttr("disabled");
  })
  //enable button when drop down changes
  $(':input[name=sNewPKvalue2]').focus(function() {
      disableAllButtons();
      $(':input[name=Update1]').removeAttr("disabled");
  })
  ////.....question?
});

Вопрос

Если у меня есть 12 выпадающих списков и 12 кнопок

Как мне перебрать все выпадающие списки с именем sNewPKvalue[1-12] и все кнопки с именем Update[0-11]

Ответ №1:

Я бы не рекомендовал цикл. Просто используйте селектор, который выбирает нужные вам элементы и выполняет соответствующее действие. Моя первая мысль — назначить класс CSS кнопкам и выпадающим спискам, о которых вы говорите. Тогда вы можете просто сделать что-то вроде этого:

 $('.dropDown').focus(function(){
   $(".ddlButton").attr("disabled", "true");
   $(this).closest('.ddlButton').removeAttr("disabled");
});

1. это .closest() не сработает, поскольку применяется только к дереву DOM. В моем случае input[type=button] это не в дереве DOM в раскрывающемся списке

2. Можете ли вы опубликовать свой HTML или, что еще лучше, скрипку с HTML в нем?

3. Я опубликовал пример здесь jsbin.com/afiwag исходный код для JS показывает ваш подход. Из чтения .closest() документации я думаю, что это будет работать только в дереве DOM api.jquery.com/closest

Ответ №2:

Я бы сделал что-то вроде:

 $.each([1, 12], function(index, value) {
    var valmin = val - 1;
    $(':input[name=sNewPKvalue' value ']').focus(function() {
        disableAllButtons();
        $(':input[name=Update' valmin ']').removeAttr("disabled");
    })
});

Я не тестировал это, но вы должны понять идею 😉

Ответ №3:

Вы можете сделать это таким образом.

 for (var i = 0; i < 12; i  )
{
  $(':input[name=sNewPKvalue' (i 1) ']').focus(function() {
      disableAllButtons();
      $(':input[name=Update' i ']').removeAttr("disabled");
  })
}

Или

   $(':input[name^=sNewPKvalue]').focus(function() {
      disableAllButtons();
      $(':input[name=Update' (Number(this.name.match(/[0-9] /))-1) ']').removeAttr("disabled");
  })

1. Я попробовал цикл, но он всегда удаляет отключенный атрибут из кнопки последнего обновления. он не синхронизируется с выпадающим списком. Я думаю, это потому, что при каждом фокусе он проходит через цикл. второй подход работает намного лучше

Ответ №4:

Что вы могли бы сделать, так это создать цикл for .

 for(var i = 1; i <= 12; i  ) {
    $("select[name='sNewPKvalue" i "']").doSomething();
}

for(var i = 1; i <= 11; i  ) {
    $(":button[name='Update" i "']").doSomething();
}