Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   как найти div-ы по содержимому и поменять им свойства (https://javascript.ru/forum/events/59405-kak-najjti-div-y-po-soderzhimomu-i-pomenyat-im-svojjstva.html)

sovsem-nub 09.11.2015 21:53

как найти div-ы по содержимому и поменять им свойства
 
на странице есть div
<button class="tc-btn-invisible">Стойки для очков</button>

или <div>Стойки для очков</div> или с другими тегами, но с одним содержимым. Кроме "Стойки для очков" внутри тегов ничего нет.

как найти все блоки с содержимым "Стойки для очков" и применить им свойство color:red;

нужно ли для этого перебирать каждый элемент и смотреть его innerhtml или как-то можно задействовать queryselector для содержимого?

рони 09.11.2015 22:59

Цитата:

Сообщение от sovsem-nub
нужно ли для этого перебирать каждый элемент и смотреть его innerhtml

да

krasovsky 10.11.2015 05:43

Цитата:

Сообщение от sovsem-nub
на странице есть div
<button class="tc-btn-invisible">Стойки для очков</button>

Я не эксперт, но кажется это не div

Если искомый текст однозначно находится в каком либо одном типе элементов/нескольких, то можешь по крайней мере выбрать массив этих элементов, и перебирать их на не все подряд. Если используешь jq то можно использовать filter или contains

sovsem-nub 10.11.2015 11:35

вот страница
<ul>
  <li>Этот
    <button class="tc-btn-invisible">Стойки для очков</button>
    <button class="tc-btn-invisible">Стойки для носков</button>
      </li>
  <li>тест</li>
</ul>
<ul>
    
    <a class="tc-tiddlylink tc-tiddlylink-resolves"  href="#HelloThere">
<span class=" tc-reveal"></span>
<span class=" tc-reveal" hidden="true"></span>
Стойки для очков
</a>
    
  <li>полностью</li>
  <li>пройден</li>
</ul>


var elements = document.querySelectorAll('ul  button') ;

  for (var i = 0; i < elements.length; i++) {
    if( elements[i].innerHTML=="Стойки для очков" ){elements[i].style.color = 'red';} ; 
  }


если 'ul button' , то все работает, а если 'ul a' то не работает. как сделать чтобы innerhtml не учитывал <> внутри себя?

и как добавить несколько условий поиска в document.querySelectorAll('ul button') ?
вот тут код http://jsfiddle.net/zip13/e6xh09kf/1/

рони 10.11.2015 11:48

sovsem-nub,
ищутся текстовые ноды и применяется стиль к их родителям.

рони 10.11.2015 11:56

sovsem-nub,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var s = $("button, a");
       s.contents().filter(function() {
  return this.nodeType == 3 && this.data.indexOf('Стойки для очков') != -1;
}).parent().css({color:'red'})

});


  </script>
</head>

<body>  <ul>
  <li>Этот
    <button class="tc-btn-invisible">Стойки для очков</button>
    <button class="tc-btn-invisible">Стойки для носков</button>
      </li>
  <li>тест</li>
</ul>
<ul>

    <a class="tc-tiddlylink tc-tiddlylink-resolves"  href="#HelloThere">
<span class=" tc-reveal"></span>
<span class=" tc-reveal" hidden="true"></span>
Стойки для очков
</a>

  <li>полностью</li>
  <li>пройден</li>
</ul>

</body>

</html>

sovsem-nub 10.11.2015 11:58

пробовал регуляркой убрать <>
как-то так alert( elements[i].innerHTML.replace(/<.*?>/g, ""));
она убирает код, но в алерте появляется пустая строка сверху (не пробелы), как и ее убрать?

рони 10.11.2015 12:00

не
Цитата:

Сообщение от sovsem-nub
innerHTML=="Стойки для очков"

а
innerHTML.
Цитата:

Сообщение от рони
indexOf('Стойки для очков')


sovsem-nub 10.11.2015 12:17

Цитата:

Сообщение от рони (Сообщение 395489)
не
а
innerHTML.

Спасибо, Рони. Только нужно на чистом js без /jquery

indexOf как-то странно себя повел. Он покрасил "a" правильно, а "button" покрасил не тот а следующий. http://jsfiddle.net/zip13/e6xh09kf/2/

и мне он не подойдет, так как вариант "Стойки для очков бывают разные" не должен красится

и как условия ИЛИ в селекторе делаются?

и как вы код с кнопочкой ПУСК выкладываете?

рони 10.11.2015 12:40

Цитата:

Сообщение от sovsem-nub
и как вы код с кнопочкой ПУСК выкладываете?

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.


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