Форум

sovsem-nub · #1 (**permalink**) 09.11.2015, 22:53

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

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

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

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

рони · #2 (**permalink**) 09.11.2015, 23:59

Сообщение от sovsem-nub

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

да

krasovsky · #3 (**permalink**) 10.11.2015, 06:43

Сообщение от sovsem-nub

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

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

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

sovsem-nub · #4 (**permalink**) 10.11.2015, 12: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/

рони · #5 (**permalink**) 10.11.2015, 12:48

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

рони · #6 (**permalink**) 10.11.2015, 12: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 · #7 (**permalink**) 10.11.2015, 12:58

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

рони · #8 (**permalink**) 10.11.2015, 13:00

не

Сообщение от sovsem-nub

innerHTML=="Стойки для очков"

а
innerHTML.

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

indexOf('Стойки для очков')

sovsem-nub · #9 (**permalink**) 10.11.2015, 13:17

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

не
а
innerHTML.

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

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

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

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

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

рони · #10 (**permalink**) 10.11.2015, 13:40

Сообщение от sovsem-nub

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

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

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

[js]
... ваш код...
[/js]

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

Форум

Справочник

Discord чат

Курсы javascript