addClass на основе значения переменной

Я хотел бы добавить класс после того, как кто-то будет вводить форму ввода. Это работает и выделяет слово консультативного в моей странице:addClass на основе значения переменной

var value = "Advisory"; 

$("a:contains("+ value +")").addClass("highlight");

Это работает и дает мне предупреждение, которое показывает, что напечатал пользователь:

$(document).ready(function() { 


$("#filterinput").change(function(){ 
var value = $(this).val(); 

alert(value); 

}); 
});

Но это не работает (я пробовал все виды комбинаций котировок и т. д.):

$(document).ready(function() { 


$("#filterinput").change(function(){ 
var value = $(this).val(); 


$("a:contains('"+ value +"')").addClass("highlight").load(); 


    }); 
});

Может кто-нибудь помочь?

Отредактировано. Мой код очень длинный, но вот образец html, который я бы хотел найти. В первом примере, который работает, подчеркивается весь текст «Консультативного совета по историческому сохранению», потому что это то, что находится между привязными тегами.

<ul class="treebranch"> 
    <li class="govdocs"> <a href="http://www.archives.gov/federal-register/acfr/">Administrative Committee of the Federal Register</a></li> 
    <li class="govdocs"> <a href="http://www.achp.gov/index.html">Advisory Council on Historic Preservation</a></li> 
    <li class="govdocs"> <a href="http://www.abmc.gov/home.php">American Battle Monuments Commission</a></li> 
    <li class="govdocs"> <a href="http://www.arc.gov/">Appalachian Regional Commission</a></li> 
    <li class="govdocs"> <a href="http://www.access-board.gov/">Architectural and Transportation Barriers Compliance Board (Access Board)</a></li> 
    <li class="govdocs"> <a href="http://www.arctic.gov/">Arctic Research Commission</a></li> 
    <li class="govdocs"> <a href="http://www.afrh.gov/">Armed Forces Retirement  Home</a></li> 
</ul>

источник

2013-03-05 user2137466

Извините - jquery, поиск html-страницы. – user2137466

Обратите внимание, что примеры несовместимы, первый рабочий использует два «и третий (не работает) использует один раз« и другой ». – alonisser

': contains' ищет текстовое содержимое элементов. Каково содержание вашего html элемента, который вы хотите найти? Можете ли вы опубликовать html? – Brandon

Почему вы называете load() после добавления класса к выбранному элементу? jQuery имеет два метода load(), один из них - метод AJAX для загрузки данных с сервера и вставки его в выбранный элемент. Другой - добавить обработчик события к элементу, который будет выполнен после его загрузки в DOM. Ни один из способов не подходит здесь, что вы пытаетесь сделать?

Последний фрагмент, который вы опубликовали does actually work, однако вам нужно размыть ввод текста, нажав или нажав на него), прежде чем имя класса будет применено к целевому элементу. Я удалил селектор a из фильтра :contains в примере JSBin и вместо этого использовал простой <p>.

Вы лучше использовать событие KeyUp на входе вместо события изменения, то класс будет применяться после того, как ключ набирается:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<style> 
    .highlight { color:red; } 
</style> 
</head> 
<body> 
    <p>woo</p> 
    <input id="filterinput"/> 

    <script> 
     $(document).ready(function() { 


      $("#filterinput").keyup(function() { 
       var value = $(this).val(), 
        target = $(":contains('" + value + "')"); 

       if (!target.hasClass("highlight")) { 
       target.addClass("highlight"); 
       } 
      }); 
     }); 
    </script> 
</body> 
</html>

источник

2013-03-05 21:54:03 danwellman

Спасибо! Мне пришлось добавить селектор, потому что ваш код выделяет все (добавьте текст вокруг woo, и все будет красным). Но я получил его работу, за исключением того, что он чувствителен к регистру, я думаю, что могу найти инструкции для этого где-нибудь на этом сайте. – user2137466

Я рекомендую использовать grep для этого вместо сложный селектор CSS.

JsFiddle показывает, как это работает: http://jsfiddle.net/GZHA4/1/

Это даст вам лучший контроль над тем, как он соответствует. Например, если вы хотите нечувствительность к регистру, вы можете ввести верхний или нижний регистр как value, так и $(element).text().

источник

2013-03-05 22:15:41

addClass на основе значения переменной

ответ

Смежные вопросы