Как осуществить проверку на точное совпадение на jQuery?
Не так давно я реализовал весьма интересное дополнение, о котором вы можете почитать в этой статье. Так вот – там мне было необходимо осуществить проверку на точное совпадение моей фразы с имеющимися данными.
Сначала я решил реализовать это следующим образом:
<ul>
<li>Один</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
</ul>
<script>
$("ul li:contains('Два')").css("color", "blue");
</script>
Вроде бы все хорошо, но это до тех пор, пока вы не имеете две похожие фразы, например:
<ul>
<li>Один</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
<li>Двадцать</li>
</ul>
<script>
$("ul li:contains('Два')").css("color", "blue");
</script>
В таком случае определение совпадения происходит не совсем корректно, ведь если лишь часть предложенной фразы совпадает, то нужное нам действие выполняется.
В моем случае мне было необходимо произвести проверку на точное соответствие. Поскольку в jQuery такого селектора не нашлось, было решено добавить свой.
Реализация:
<script>
$.expr[":"].exact = $.expr.createPseudo(function(arg) {
return function(element) {
return $(element).text() === arg.trim();
};
});
</script>
Ну и, соответственно, ее использование:
<ul>
<li>Один</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
<li>Двадцать</li>
</ul>
<script>
$.expr[":"].exact = $.expr.createPseudo(function(arg) {
return function(element) {
return $(element).text() === arg.trim();
};
});
$("ul li:exact('Два')").css("color", "blue");
</script>
В таком случае поиск будет происходить по точной фразе, что, соответственно, нам и нужно.