Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2016, 20:04
Новичок на форуме
Отправить личное сообщение для SanteR Посмотреть профиль Найти все сообщения от SanteR
 
Регистрация: 15.11.2016
Сообщений: 8

поиск класса с нужным текстом. В один проход.
Доброго вечера. Подскажите как сделать в один проход, что бы не искать дважды $(".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");
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2016, 20:19
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

SanteR,
Это можно сделать через .end
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2016, 20:54
Новичок на форуме
Отправить личное сообщение для SanteR Посмотреть профиль Найти все сообщения от SanteR
 
Регистрация: 15.11.2016
Сообщений: 8

Coriolan161,

Получается вот так?
Но тут ведь дважды поиск будет делаться. В первом случаи не содержащие, а во втором содержащие. Соответственно времени на выполнение в два раза больше. Или он будет делать поиск в уже имеющейся коллекции (что сократит время выполнения)?

$(".hero-grid a:not(:containsIN('" + $(this).val().toLowerCase() + "'))").css("opacity", "0.1")
.end().find("a:contains('" + $(this).val().toLowerCase() + "')").css("opacity", "");

Последний раз редактировалось SanteR, 15.11.2016 в 20:57.
Ответить с цитированием
  #4 (permalink)  
Старый 15.11.2016, 20:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Coriolan161,
а можно пример?
Ответить с цитированием
  #5 (permalink)  
Старый 15.11.2016, 21:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

SanteR,
http://api.jquery.com/css/#css-propertyName-function возвращайте значение opacity согласно содержанию искомого в this.textContent
Ответить с цитированием
  #6 (permalink)  
Старый 15.11.2016, 21:20
Новичок на форуме
Отправить личное сообщение для SanteR Посмотреть профиль Найти все сообщения от SanteR
 
Регистрация: 15.11.2016
Сообщений: 8

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

Последний раз редактировалось SanteR, 15.11.2016 в 21:23.
Ответить с цитированием
  #7 (permalink)  
Старый 15.11.2016, 21:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

SanteR,
не понял, совет пригодился или вы оставили свой вариант который в 2 раза больше?
Ответить с цитированием
  #8 (permalink)  
Старый 15.11.2016, 21:35
Новичок на форуме
Отправить личное сообщение для SanteR Посмотреть профиль Найти все сообщения от SanteR
 
Регистрация: 15.11.2016
Сообщений: 8

Мой вариант изначально был без .end а просто была строчка которая ставила прозрачность в 1, затем шёл код поиска текста и прозрачность в 0.1
Мне же хотелось избавиться от поиска в два хода.
Ответить с цитированием
  #9 (permalink)  
Старый 15.11.2016, 21:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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
        })
    })
});
Ответить с цитированием
  #10 (permalink)  
Старый 15.11.2016, 21:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

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
        })
    })
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поиск класса и задание на after css свойста flyte Элементы интерфейса 6 15.06.2016 21:28
Поиск текста в блоке и добавление ему класса Venegrad Events/DOM/Window 2 08.02.2014 09:37
один обработчик для всех элементов определенного класса Pedro Garciya Lopez Events/DOM/Window 6 05.07.2013 22:39
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 17:17
Поиск класса на всей странички BoB jQuery 7 30.11.2012 18:45