Селектор jquery для id начинается с определенного текста

У меня есть этот код jQuery:

$( "#editDialog" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    duration: 1000
  },
  hide: {
    effect: "explode",
    duration: 1000
  }
});

Но у меня есть несколько div с идентификатором типа: editDialog-0, editDialog-1,...., editDialog-n.

Как я могу создать код jQuery для всех этих div, например, выше?

Ответ 1

Использовать jquery начинается с селектора атрибутов

$('[id^=editDialog]')

Альтернативное решение - 1 (рекомендуется)

Более чистым решением является добавление общего класса в каждый из разделов и использование

$('.commonClass').

Но вы можете использовать первый, если html-разметка не в ваших руках и не может поменять ее по какой-либо причине.

Альтернативное решение - 2 (не рекомендуется, если n is a large number) (согласно предложению @Mihai Stancu)

$('#editDialog-0, #editDialog-1, #editDialog-2,...,#editDialog-n')

Примечание. Если есть 2 или 3 селектора, и если список не изменяется, это, вероятно, жизнеспособное решение, но оно не является расширяемым, потому что мы должны обновлять селектора, когда в городе есть новый идентификатор.

Ответ 2

Позвольте мне предложить более обширный ответ, учитывая то, что вы еще не упомянули, но найдете полезным.

Для вашей текущей проблемы ответ

$("div[id^='editDialog']");

Каретка (^) берется из регулярных выражений и означает starts with.

Решение 1

// Select elems where 'attribute' ends with 'Dialog'
$("[attribute$='Dialog']"); 

// Selects all divs where attribute is NOT equal to value    
$("div[attribute!='value']"); 

// Select all elements that have an attribute whose value is like
$("[attribute*='value']"); 

// Select all elements that have an attribute whose value has the word foobar
$("[attribute~='foobar']"); 

// Select all elements that have an attribute whose value starts with 'foo' and ends
//  with 'bar'
$("[attribute^='foo'][attribute$='bar']");

attribute в приведенном выше коде может быть изменен на любой атрибут, который может иметь этот элемент, например href, name, id или src.

Решение 2

Использовать классы

// Matches all items that have the class 'classname'
$(".className");

// Matches all divs that have the class 'classname'
$("div.className");

Решение 3

Перечислите их (также отмеченные в предыдущих ответах)

$("#id1,#id2,#id3");

Решение 4

Если вы улучшаете, регулярное выражение (никогда не использовалось, решение one всегда было достаточным, но вы никогда не знаете!

// Matches all elements whose id takes the form editDialog-{one_or_more_integers}
$('div').filter(function () {this.id.match(/editDialog\-\d+/)});

Ответ 3

Добавьте общий класс ко всем div. Например, добавьте foo ко всем div.

$('.foo').each(function () {
   $(this).dialog({
    autoOpen: false,
    show: {
      effect: "blind",
      duration: 1000
    },
    hide: {
      effect: "explode",
      duration: 1000
    }
  });
});

Ответ 4

Если все ваши div начинаются с editDialog, как вы заявили, вы можете использовать следующий селектор:

$("div[id^='editDialog']")

Или вы могли бы использовать селектор классов, если вам это проще

<div id="editDialog-0" class="editDialog">...</div>

$(".editDialog")