Как выбрать несколько идентификаторов div, которые начинаются со строки, с помощью jQuery

#javascript #jquery

#javascript #jquery

Вопрос:

В приведенном ниже фрагменте $modal не определен, поскольку существует несколько экземпляров формы.

 <script type="text/javascript">
  $(document).ready(function() {
    var $modals = $(".update-form");
    var $form = $("#program-update-form-{{ form.instance.uuid }}");

    $modals.on("hide.bs.modal", function() {
      $form.trigger("reset");
    });

  });
</script>


<html>
  {% for id in form.instance.uuid %}
    <div id="program-update-modal-{{ form.instance.uuid }}" class="update-form">
  {% endfor %}
</html>
 

Я думаю, что я хочу сделать, это собрать все program-update-modals и запустить сброс для действия hide.bs.modal. Количество экземпляров формы будет динамическим, и, очевидно, идентификаторы uuid будут динамическими, поэтому мне нужно знать, как в jQuery просто захватить все идентификаторы div, начинающиеся с ‘program-update-modal-‘. Откройте и другие предложения.

Комментарии:

1. Когда / как запускается «hide.bs.modal»? Это не стандартное событие

2. Именно для этого и существуют классы. Добавьте имя класса к элементам, которые вы хотите сгруппировать.

3. @Dropout если я использую имя класса, будет ли строка $modal.on() по-прежнему работать?

4. @BenjaminDonnaloia это должно быть ИМО .. $modal.on(...) привязывает обработчик события к элементу. Если вы измените селектор на селектор класса, то $(".some-class") есть он должен привязать событие к каждому из элементов.

5. @Dropout, я обновил OP с вашим предложением, похоже ли это на то, что вы говорите?

Ответ №1:

Используйте встроенный селектор starts with. https://api.jquery.com/attribute-starts-with-selector /

 var divs = $("div[id^='program-udpate-modal']");
 

Ответ №2:

Чтобы собрать все divs с общим шаблоном идентификаторов, просто запросите все DIVs, а затем отфильтруйте, затем выполните итерацию по всем ним и поместите их поименно в объект Javascript

 var PUMDivs = {}

var divs = $("DIV").filter(function(elem) {
  return elem.id.indexOf("program-update-modal-") == 0;
}).each(function(idx, elem) {
  PUMDivs[this.id.substring("program-update-model-".length)] = elem;
});
 

Ответ №3:

 var $form = $("[id^=program-update-form-]");

$modals.on("hide.bs.modal", function() {
  $form.trigger("reset");
});
 

Чтобы получить все элементы, начинающиеся с «program-update-form-«, вы должны использовать: