поиск класса с нужным текстом. В один проход.

[SanteR]

Доброго вечера. Подскажите как сделать в один проход, что бы не искать дважды $(".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");

[Coriolan161]

SanteR,
Это можно сделать через .end

[SanteR]

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

[SanteR]

рони, спасибо за ответ.
У меня скрипт работает, возвращает значение css правильно. Только глядя на скрипт, который у меня получился,мое мнение, что он выполняется в два раза больше, чем мог бы. Потому что поиск элементов идет два раза.
Вот мой пример
https://jsfiddle.net/SanteR1/myef39d4/5/

[рони]

SanteR,
не понял, совет пригодился или вы оставили свой вариант который в 2 раза больше?

[SanteR]

Мой вариант изначально был без .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]

Рони,
Спасибо утром уже посмотрю результат. На вид вроде понятно.
А то уже с телефона сижу .

[Coriolan161]

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')
});

Либо как рони предлагает

[SanteR]

Метод Coriolan161 по быстрее вроде работает, спасибо.
В методе рони основная функция выполняется единожды, а вот этот код
a.css("opacity", function() {
return this.textContent.toLowerCase().indexOf(text) > -1 ? 1 : .1

выполняется каждый раз и среднее время 22ms. Если я правильно замерял время для вложенных функций в методе рони :-?
Спасибо вам!

[рони]

SanteR,
в моём решении меньше циклов чем у
Coriolan161, теоретически должно работать быстрее :) но в данном случае думаю разница не существенна.

[рони]

SanteR,
https://jsfiddle.net/myef39d4/7/
https://jsfiddle.net/myef39d4/8/

[SanteR]

рони,
Я у себя проверил на 120 ссылках.
Вот для наглядности можете глянуть тут 112 ссылок что ли. Разница приличная.
https://jsfiddle.net/SanteR1/myef39d4/9/
https://jsfiddle.net/SanteR1/myef39d4/10/

Может такая разница из за метода .indexOf в отличии от :contains :write:

[рони]

SanteR,
да с css("opacity", function ) получается медленнее, можно без jquery попробовать

[рони]

SanteR,
вариант без jquery
https://jsfiddle.net/myef39d4/11/

[SanteR]

рони,
Я вообще новичок в jquery.
Этот вариант самый быстрый)) :dance:

Спасибо еще раз всем!