Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.11.2015, 21:53
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 241

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

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

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

нужно ли для этого перебирать каждый элемент и смотреть его innerhtml или как-то можно задействовать queryselector для содержимого?
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2015, 22:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

Сообщение от sovsem-nub
нужно ли для этого перебирать каждый элемент и смотреть его innerhtml
да
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2015, 05:43
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

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

Если искомый текст однозначно находится в каком либо одном типе элементов/нескольких, то можешь по крайней мере выбрать массив этих элементов, и перебирать их на не все подряд. Если используешь jq то можно использовать filter или contains
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2015, 11:35
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 241

вот страница
<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, 11:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

sovsem-nub,
ищутся текстовые ноды и применяется стиль к их родителям.
Ответить с цитированием
  #6 (permalink)  
Старый 10.11.2015, 11:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

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>
Ответить с цитированием
  #7 (permalink)  
Старый 10.11.2015, 11:58
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 241

пробовал регуляркой убрать <>
как-то так alert( elements[i].innerHTML.replace(/<.*?>/g, ""));
она убирает код, но в алерте появляется пустая строка сверху (не пробелы), как и ее убрать?
Ответить с цитированием
  #8 (permalink)  
Старый 10.11.2015, 12:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

не
Сообщение от sovsem-nub
innerHTML=="Стойки для очков"
а
innerHTML.
Сообщение от рони
indexOf('Стойки для очков')
Ответить с цитированием
  #9 (permalink)  
Старый 10.11.2015, 12:17
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 241

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

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

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

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

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

Последний раз редактировалось sovsem-nub, 10.11.2015 в 12:26.
Ответить с цитированием
  #10 (permalink)  
Старый 10.11.2015, 12:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

Сообщение от sovsem-nub
и как вы код с кнопочкой ПУСК выкладываете?
Пожалуйста, отформатируйте свой код!

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


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вывести свойства div значения которых равно 1? sovsem-nub Events/DOM/Window 8 16.04.2015 13:12
Div внутри Div. Как сделать hover только для самого верхнего? Siend Общие вопросы Javascript 2 19.03.2015 21:16
Как вернуть div и все вложенные в него элементы в первоначальное состояние? lucky89 Общие вопросы Javascript 17 26.02.2015 17:41
Как узнать что кликнули по созданному DIV DIrectman Events/DOM/Window 2 19.01.2015 16:59
Как найти node элемент по позиции в html документе и обратоно meded90 Общие вопросы Javascript 0 06.09.2014 21:45