поиск класса с нужным текстом. В один проход.
Доброго вечера. Подскажите как сделать в один проход, что бы не искать дважды $(".hero-grid a").
Ищем ссылку содержащую необходимый текст, не подходящим в запросе ставим opacity: 0,1; Поиск идет по символьно. $(".hero-grid a").css("opacity", "1.0"); // <--- Хочется эту строку записать в одну с нижней. Эта строка возвращает непрозрачность, на случай если в строке поиска удалять набранные символы (возвращаем opacity в первоначальное значение). $(".hero-grid a:not(:containsIN('" + $(this).val().toLowerCase() + "'))").css("opacity", "0.1"); |
SanteR,
Это можно сделать через .end |
Coriolan161,
Получается вот так? Но тут ведь дважды поиск будет делаться. В первом случаи не содержащие, а во втором содержащие. Соответственно времени на выполнение в два раза больше. Или он будет делать поиск в уже имеющейся коллекции (что сократит время выполнения)? $(".hero-grid a:not(:containsIN('" + $(this).val().toLowerCase() + "'))").css("opacity", "0.1") .end().find("a:contains('" + $(this).val().toLowerCase() + "')").css("opacity", ""); |
Coriolan161,
а можно пример? |
SanteR,
http://api.jquery.com/css/#css-propertyName-function возвращайте значение opacity согласно содержанию искомого в this.textContent |
рони, спасибо за ответ.
У меня скрипт работает, возвращает значение css правильно. Только глядя на скрипт, который у меня получился,мое мнение, что он выполняется в два раза больше, чем мог бы. Потому что поиск элементов идет два раза. Вот мой пример https://jsfiddle.net/SanteR1/myef39d4/5/ |
SanteR,
не понял, совет пригодился или вы оставили свой вариант который в 2 раза больше? |
Мой вариант изначально был без .end а просто была строчка которая ставила прозрачность в 1, затем шёл код поиска текста и прозрачность в 0.1
Мне же хотелось избавиться от поиска в два хода. |
SanteR,
:-? $(function() { $("#textBoxID").on("input", function() { var text = this.value.toLowerCase(); $(".hero-grid a").css("opacity", function() { return this.textContent.toLowerCase().indexOf(text) > -1 ? 1 : .1 }) }) }); |
SanteR,
или так если ссылки величина постоянная, можно сэкономить пару спичек, кешируя поиск элементов. $(function() { var a = $(".hero-grid a"); $("#textBoxID").on("input", function() { var text = this.value.toLowerCase(); a.css("opacity", function() { return this.textContent.toLowerCase().indexOf(text) > -1 ? 1 : .1 }) }) }); |
Рони,
Спасибо утром уже посмотрю результат. На вид вроде понятно. А то уже с телефона сижу . |
SanteR,
Не надо .end. Пардон <input type="text" id="model"> <div class="hero-grid"> <a href="">aaa</a> <a href="">bbb</a> <a href="">ccc</a> <a href="">ddd</a> <a href="">eee</a> <a href="">fff</a> <a href="">ggg</a> <a href="">hhh</a> <a href="">iii</a> <a href="">nnn</a> <a href="">abc</a> </div> $('#model').on('input', function() { var $this = $(this); $('.hero-grid a') .css('opacity', '1') .not(':contains('+$this.val().toLowerCase()+')') .css('opacity', '0.1') }); Либо как рони предлагает |
Метод Coriolan161 по быстрее вроде работает, спасибо.
В методе рони основная функция выполняется единожды, а вот этот код a.css("opacity", function() { return this.textContent.toLowerCase().indexOf(text) > -1 ? 1 : .1 выполняется каждый раз и среднее время 22ms. Если я правильно замерял время для вложенных функций в методе рони :-? Спасибо вам! |
SanteR,
в моём решении меньше циклов чем у Coriolan161, теоретически должно работать быстрее :) но в данном случае думаю разница не существенна. |
|
рони,
Я у себя проверил на 120 ссылках. Вот для наглядности можете глянуть тут 112 ссылок что ли. Разница приличная. https://jsfiddle.net/SanteR1/myef39d4/9/ https://jsfiddle.net/SanteR1/myef39d4/10/ Может такая разница из за метода .indexOf в отличии от :contains :write: |
SanteR,
да с css("opacity", function ) получается медленнее, можно без jquery попробовать |
|
рони,
Я вообще новичок в jquery. Этот вариант самый быстрый)) :dance: Спасибо еще раз всем! |
Часовой пояс GMT +3, время: 08:42. |