Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Установить класс всем элементам с похожими именами, Id, элементам одного класса (https://javascript.ru/forum/events/44576-ustanovit-klass-vsem-ehlementam-s-pokhozhimi-imenami-id-ehlementam-odnogo-klassa.html)

sergey_privacy 24.01.2014 23:15
Установить класс всем элементам с похожими именами, Id, элементам одного класса
 
Простите нуба за нубский вопрос, но уже несколько часов бьюсь, никак не получается решить задачу.
Подскажите, как установить класс всем элементам с похожими именами, похожими Id или элементам одного класса?

Есть набор картинок, количество которых заранее неизвестно. На страницу выводятся так: 
<img src="aaa" name="image1" id="image1" class="images">
.....
<img src="yyy" name="image999" id="image999" class="images">
<img src="zzz" name="image1000" id="image1000" class="images">

Как мне применить к ним ко всем одно и то же действие? Например, установить всем одинаковый класс или стиль css?

рони 25.01.2014 00:13
sergey_privacy,
выделяй похожесть например так в jquery
Цитата:
$('[id ^= image]') вернет все элементы с id, начинающимися с image

sergey_privacy 25.01.2014 00:31
Цитата:
Сообщение от рони (Сообщение 293911)
sergey_privacy,
выделяй похожесть например так в jquery
А можно работающий пример кода? Я уже несколько часов сижу, разные варианты пробую. Алерт в похожем запросе выводит, а класс не подставляет или еще что то работает, но только не моя задача. Пробовал, к примеру, так:
$(".images").className = 'thumb';

Пробовал перебор массива и т.д.

рони 25.01.2014 00:34
Цитата:
Сообщение от sergey_privacy
$(".images").className
странное сочетание 
$(".images").addClass('thumb')

конечно если вы подключили jquery

рони 25.01.2014 00:41
sergey_privacy,
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
    img{
      width: 50px;
      height: 50px;
      float: left;
      padding: 15px;
      margin: 5px;

    }
    .thumb{border:5px dotted red}
  </style>
</head>
<body>
<img src="aaa" name="image1" id="image1" class="images">
<img src="yyy" name="image999" id="image999" class="images">
<img src="zzz" name="image1000" id="image1000" class="images">

<script>
   // $(".images").addClass("thumb");
    $('[id ^= image]').addClass("thumb");
</script>
</body>
</html>

danik.js 25.01.2014 06:27
sergey_privacy, вы расширение для браузера делаете? Или не имеете доступа к серверу? Откуда такая странная задача? Если доступ есть - поправьте скрипт/шаблонизатор чтобы все выводилось уже с нужным классом. Не обязательно ведь использовать анус для решения проблемы )

sergey_privacy 25.01.2014 13:01
Цитата:
Сообщение от рони (Сообщение 293914)
странное сочетание 
$(".images").addClass('thumb')

конечно если вы подключили jquery
1. addclass добавляет класс, как я понимаю? А как заменить существующий?
2. Я только начинаю изучать JS, поэтому методы JS и jquery пока путаю.

рони 25.01.2014 13:05
Цитата:
Сообщение от sergey_privacy
А как заменить существующий?
посмотреть документацию на jquery removeClass

sergey_privacy 25.01.2014 13:09
Цитата:
Сообщение от danik.js (Сообщение 293939)
sergey_privacy, вы расширение для браузера делаете? Или не имеете доступа к серверу? Откуда такая странная задача? Если доступ есть - поправьте скрипт/шаблонизатор чтобы все выводилось уже с нужным классом. Не обязательно ведь использовать анус для решения проблемы )
Кто сказал, что я решаю задачу через анус? Просто у вас недостаточно данных для понимания условий задачи. Есть куча картинок. У всех одинаковый класс, имя и идентификатор отличается номером. При нажатии на картинку вызывается событие, которое этой картинке меняет класс и она становится выделенной. Если нажать на соседнюю картинку, будет вызван тот же обработчик, у нее тоже появится выделение, т.е. изменится класс. Но мне нужно у предыдущей картинки убрать выделение. Для этого в обработчике, перед выделением картинки, требуется отменить выделение у всех картинок данного класса.

sergey_privacy 25.01.2014 13:10
Цитата:
Сообщение от рони (Сообщение 293961)
посмотреть документацию на jquery removeClass
О, спасибо большое, сейчас буду смотреть в эту сторону.

sergey_privacy 25.01.2014 13:16
Цитата:
Сообщение от рони (Сообщение 293961)
посмотреть документацию на jquery removeClass
Все, проблема решена, благодаря вам. Спасибо огромное за помощь!

Vlasenko Fedor 25.01.2014 13:16
Цитата:
Сообщение от sergey_privacy
у вас недостаточно данных для понимания условий задачи
чем подробнее объясните задачу, тем быстрее получите правильный ответ
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
    img{
      width: 50px;
      height: 50px;
      float: left;
      padding: 15px;
      margin: 5px;

    }
    .thumb{border:5px dotted red}
  </style>
</head>
<body>
<img src="aaa" name="image1" id="image1" class="images">
<img src="yyy" name="image999" id="image999" class="images">
<img src="zzz" name="image1000" id="image1000" class="images">

<script>
  jQuery(function($){   
    $(".images").on("click", function () {
        $(this).addClass("thumb").siblings().removeClass("thumb");
    });
});
</script>
</body>
</html>

kostyanet 27.01.2014 17:27
Цитата:
Сообщение от sergey_privacy
Кто сказал, что я решаю задачу через анус?
Именно так.

Откудова берутся эти отличающиеся номером идентификаторы, оттудова берется и массив номеров или тупо массив id. По которому в браузере вы можете найти любой элемент без ковыряния в анусе jquery.


Часовой пояс GMT +3, время: 11:46.