jQuery Выберите несколько элементов div по идентификатору, используя startswith common string

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я хочу установить один и тот же css для всех этих элементов div:

     <div id="Some_id_1"></div>
    <div id="Some_id_2"></div>
    <div id="Some_id_3"></div>
  

Как я могу это сделать?
Спасибо.

Ответ №1:

Вы должны иметь возможность использовать атрибут jQuery, начинающийся с Selector:

Использование:

 $('[attribute^="value"]')
  

Пример, соответствующий вашим потребностям:

 $('div[id^="Some_id_"]').each(function(){
    $(this).css('property','value');
});
  

Это было бы полезно для динамической настройки этих свойств, однако, если вы просто устанавливаете их в статическом смысле, я бы рекомендовал просто применить class="your_class" ко всем вашим разделам.

Рабочую демонстрацию можно найти здесь :

ДЕМОНСТРАЦИЯ

Ответ №2:

Сделайте их все членами класса, затем используйте селектор класса.

 <div class="some_class" id="Some_id_1"></div>
<div class="some_class" id="Some_id_2"></div>
<div class="some_class" id="Some_id_3"></div>

.some_class {
    line-height: 1.1;
}
  

Ответ №3:

Если возможно, укажите свой div класс:

 <div id="Some_id_1" class="newClass"></div>
<div id="Some_id_2" class="newClass"></div>
<div id="Some_id_3" class="newClass"></div>
  

а затем выберите класс и измените css с помощью css():

 $(".newClass").css("color","red");
  

Не зная вашего кода, я также использую addClass(), который лучше подходит для некоторых приложений.

 $("div").addClass("newClass");
  

Приведенный выше пример добавит класс к ЛЮБОМУ div , поэтому вам придется поиграть с селектором, который имеет смысл для вашего проекта, а затем просто использовать существующий css:

 .newClass { color: red }
  

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

1. Спасибо, у меня возникли проблемы с кодом, который генерируется на сервере, а затем отображается как html. У него есть некоторый шаблон присвоения идентификаторов элементу, я бы предпочел избежать изменения кода сервера в этой ситуации.

Ответ №4:

Чтобы использовать один и тот же стиль для всех элементов с одинаковым идентификатором, укажите это следующим образом

 .yourClass {
  line-height: 1.1;
}

$('[id^="Some_id_"]').each(function(){
    $(this).addClass("yourClass");
});