как найти div-ы по содержимому и поменять им свойства
на странице есть div
<button class="tc-btn-invisible">Стойки для очков</button> или <div>Стойки для очков</div> или с другими тегами, но с одним содержимым. Кроме "Стойки для очков" внутри тегов ничего нет. как найти все блоки с содержимым "Стойки для очков" и применить им свойство color:red; нужно ли для этого перебирать каждый элемент и смотреть его innerhtml или как-то можно задействовать queryselector для содержимого? |
Цитата:
|
Цитата:
Если искомый текст однозначно находится в каком либо одном типе элементов/нескольких, то можешь по крайней мере выбрать массив этих элементов, и перебирать их на не все подряд. Если используешь jq то можно использовать filter или contains |
вот страница
<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/ |
sovsem-nub,
ищутся текстовые ноды и применяется стиль к их родителям. |
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>
|
пробовал регуляркой убрать <>
как-то так alert( elements[i].innerHTML.replace(/<.*?>/g, "")); она убирает код, но в алерте появляется пустая строка сверху (не пробелы), как и ее убрать? |
не
Цитата:
innerHTML. Цитата:
|
Цитата:
indexOf как-то странно себя повел. Он покрасил "a" правильно, а "button" покрасил не тот а следующий. http://jsfiddle.net/zip13/e6xh09kf/2/ и мне он не подойдет, так как вариант "Стойки для очков бывают разные" не должен красится и как условия ИЛИ в селекторе делаются? и как вы код с кнопочкой ПУСК выкладываете? |
Цитата:
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
| Часовой пояс GMT +3, время: 19:58. |