Javascript-форум - Проблемка с изменением css стиля jQuery

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Проблемка с изменением css стиля jQuery (https://javascript.ru/forum/xhtml-html-css/49396-problemka-s-izmeneniem-css-stilya-jquery.html)

Georrg

11.08.2014 16:39

Проблемка с изменением css стиля jQuery

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

function getValueRMT(item){

		jQuery('[task_id='+item.id+']').addClass('redcolor');
};

где нужная строка(на которую нацелен селектор), выглядит следующим образом:

Класс redcolor: .redcolor{color: red;}
НО! Вместе выделения данного контеста выделяется подобный ему(их всего 3 нужно выделить именно этот ), пример:

<div task_id="22" class="gantt_task_line redcolor" style="left: 25793.006944444445px; top: 282px; height: 30px; line-height: 30px; width: 1942px;">

WorM32

11.08.2014 16:57

Селектор неправильный. У вас класс ставится родителю выделенного элемента.

Georrg

11.08.2014 17:12

Нет, проблема не в этом(конечно селектор сейчас не на тот элемент)Но класс должен был добавиться хотябы к родительскому элементу, а его там нет

WorM32

11.08.2014 17:16

http://learn.javascript.ru/css-selectors#отношения
http://api.jquery.com/child-selector/

Georrg

11.08.2014 17:27

спасибо конечно, полезная информация, только на главный вопрос не отвечает. Почему селектор выбирает только 1 из 3 таких полей(у всех трех одинаковый айдишники, только классами отличаются.) Выборку я делаю по таск айди, но по НЕПОНЯТНЫМ мне причинам, класс добавляется только к 1. 2 других вроде как выделились(если в консоль вывести кол-во элементов удовлетворяющих запросу, то их 3) Но класс recolor добавляется только к 1 из 3. Вот это основная моя проблема.

рони	11.08.2014 17:40

Georrg,
Вопрос пора в FAQ заносить (если его там нет).

Georrg

11.08.2014 17:47

рони,
Немного покопавшись в коде, я кое что нашел.
1) Т.К. эта функция вызывается много раз, то селектор сработал даважды:
а)

[div.gantt_task_line, prevObject: n.fn.init[1], context: document, selector: "[task_id=22]", jquery: "1.11.0", constructor: function…]
0: div.gantt_task_line.redcolor
context: document
length: 1
prevObject: n.fn.init[1]
selector: "[task_id=22]"

б)

0: div.gantt_row.redcolor
1: div.gantt_task_row.redcolor
2: div.gantt_task_line.redcolor
context: document
length: 3
prevObject: n.fn.init[1]
selector: "[task_id=22]"
__proto__: Object[0]

Вот, а класс redcolor Добавляется исходя из первого селектора. Второй почему то его не перекрывает. Наверное это уже не проблема css. Теперь совсем не понятно куда двигаться(

devote

11.08.2014 17:48

Цитата:

Сообщение от Georrg

Почему селектор выбирает только 1 из 3 таких полей

потому что jQuery не умеет выбирать по ID тегам несколько элементов, так как использует стандартный getElementById который возвращает лишь первый найденный, если вам нужно все же найти несколько элементов, используйте встроенный в браузер движок выборки по селекторам. Примерно так:

jQuery(document.querySelectorAll('[task_id='+item.id+']')).addClass('redcolor');

рони	11.08.2014 17:48

Georrg,
вы кавычки то поставили в селектор?

Georrg

11.08.2014 17:51

Цитата:

Сообщение от devote (Сообщение 325376)

jQuery(document.querySelectorAll('[task_id='+item.id+']')).addClass('redcolor');

большое спасибо! Консоль правда всеравно ругается(Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '[task_id=22]' is not a valid selector. ) Но зато я знаю куда двигаться!!

devote

11.08.2014 17:51

оу сорри. я не прав... что-то не внимателен я стал нынче.. вы же не по Id выбираете, приношу извинение за дезинформацию.

devote

11.08.2014 17:54

Цитата:

Сообщение от Georrg

Консоль правда всеравно ругается(Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '[task_id=22]' is not a valid selector. ) Но зато я знаю куда двигаться!!

что бы не ругал, нужно селектор что бы выглядел правильно: '[task_id="22"]' кавычки добавить между числом.

jQuery(document.querySelectorAll('[task_id="'+item.id+'"]')).addClass('redcolor');

рони	11.08.2014 17:54

Цитата:

Сообщение от devote

потому что jQuery не умеет выбирать по ID тегам несколько элементов

:-?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .orange {
    background: #FFCC00;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
      $("[id='block_info']").toggleClass("orange");
      alert($('body').html())

});
  </script>
</head>

<body>
<div id='block_info'>Информация</div>
<div id='block_info'>Информация</div>
<div id='block_info'>Информация</div>
</body>
</html>

devote

11.08.2014 17:58

рони,
да, про такой селектор не знал что в нем работает, но если такой, то уже увы (((

<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .orange {
    background: #FFCC00;
  }
 
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
      $("#block_info").toggleClass("orange");
      alert($('body').html())
 
});
  </script>
</head>
 
<body>
<div id='block_info'>Информация</div>
<div id='block_info'>Информация</div>
<div id='block_info'>Информация</div>
</body>
</html>

Georrg

11.08.2014 18:34

Сейчас попробую отпишусь!

Georrg

11.08.2014 18:41

Цитата:

Сообщение от рони (Сообщение 325381)

:-?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .orange {
    background: #FFCC00;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
      $("[id='block_info']").toggleClass("orange");
      alert($('body').html())

});
  </script>
</head>

<body>
<div id='block_info'>Информация</div>
<div id='block_info'>Информация</div>
<div id='block_info'>Информация</div>
</body>
</html>

Ронни вы волшебник!) Кажись заработало(правда добавляется пока к родительским классам, но ничего, думаю это уж я исправлю!!)

WorM32

12.08.2014 08:55

Цитата:

Сообщение от рони (Сообщение 325377)

Georrg,
вы кавычки то поставили в селектор?

Значение атрибута не обязательно в кавычки заключать, если там нет разрыва строки.

рони	12.08.2014 10:35

Цитата:

Сообщение от WorM32

Значение атрибута не обязательно в кавычки заключать, если там нет разрыва строки.

Цитата:

'[task_id=22]' is not a valid selector.

Цитата:

Syntax error, unrecognized expression: a[href$=.PDF]

где тут разрывы?

WorM32

12.08.2014 10:56

Цитата:

Сообщение от рони (Сообщение 325489)

где тут разрывы?

да, хрень написал ;)

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