поиск текста в дочернем div
Добрый день! В jQuery пока что не силен. Подскажите пожалуйста как найти текст внутри нескольких div'ов? Искал решение здесь, но не получается.
<div class="source"> <h2>unaccountedPoly2_source</h2> <div class="item"> <div class="PrivateItem"> <input type="checkbox" onchange="layerStatusChanged(this)" id="Private1" name="Private" checked="checked" value="2543" class="ui-helper-hidden-accessible"> <label for="Private1" class="button_text" role="button" aria-disabled="false"><span class="ui-button-text">Приватный</span></label> </div> <div class="AccessoryItem"> <input type="checkbox" onchange="layerAccessoryChanged(this)" id="Item0" name="Items" checked="checked"> <span>unaccountedPoly2</span> </div> </div> </div> необходимо при вводе в input, проверять текст в <span> на совпадение в <div class=AccessoryItem> и при не совпадении скрывать блок <div class=source> |
Цитата:
|
ну например <input type="text" id="text-search" />
|
git_bind,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.AccessoryItem span {
cursor: pointer;
background: #FFCC00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $("#text-search"), b = $(".AccessoryItem span"), d = $(".source");
s.on("input",function() {
d.toggle(this.value == b.text());
});
});
</script>
</head>
<body> <input type="text" id="text-search" />
<div class="source">
<h2>unaccountedPoly2_source</h2>
<div class="item">
<div class="PrivateItem">
<input type="checkbox" onchange="layerStatusChanged(this)" id="Private1" name="Private" checked="checked" value="2543" class="ui-helper-hidden-accessible">
<label for="Private1" class="button_text" role="button" aria-disabled="false"><span class="ui-button-text">Приватный</span></label>
</div>
<div class="AccessoryItem">
<input type="checkbox" onchange="layerAccessoryChanged(this)" id="Item0" name="Items" checked="checked">
<span>unaccountedPoly2</span>
</div>
</div>
</div>
</body>
</html>
|
супер, спасибо! а можно как-то сделать поиск по символьно? например:
<body> <input type="text" id="text-search" /> <div class="source"> <h2>unaccountedPoly2_source</h2> <div class="item"> <div class="PrivateItem"> <input type="checkbox" onchange="layerStatusChanged(this)" id="Private1" name="Private" checked="checked" value="2543" class="ui-helper-hidden-accessible"> <label for="Private1" class="button_text" role="button" aria-disabled="false"><span class="ui-button-text">Приватный</span></label> </div> <div class="AccessoryItem"> <input type="checkbox" onchange="layerAccessoryChanged(this)" id="Item0" name="Items" checked="checked"> <span>unaccountedPoly2 source</span> </div> </div> </div> <div class="source"> <h2>Poly_source</h2> <div class="item"> <div class="PrivateItem"> <input type="checkbox" onchange="layerStatusChanged(this)" id="Private1" name="Private" checked="checked" value="2543" class="ui-helper-hidden-accessible"> <label for="Private1" class="button_text" role="button" aria-disabled="false"><span class="ui-button-text">Приватный</span></label> </div> <div class="AccessoryItem"> <input type="checkbox" onchange="layerAccessoryChanged(this)" id="Item0" name="Items" checked="checked"> <span>Poly source</span> </div> </div> </div> если в input вводить посимвольно "P" "o" "l" "y" то чтобы показывалось оба div, но если еще добавить " "(пробел), то остался последний div где в span записано "Poly source" |
Цитата:
|
ну то есть, при вводе поочередно каждого символа(как при событии keyup) проверялись все span на вхождение символа в строку записанную в span
|
Цитата:
ниже вариант... сработает тот AccessoryItem span где есть совпадение, вводить или unaccountedPoly2 source или Poly source далее сами.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.AccessoryItem span {
cursor: pointer;
background: #FFCC00;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var s = $("#text-search"), b = $(".AccessoryItem span"), d = $(".source");
s.on("input",function() {
var val = this.value;
d.each(function(indx, el){
el = $(el);
el.toggle(val == el.find(b).text());
});
});
});
</script>
</head>
<body> <input type="text" id="text-search" />
<div class="source">
<h2>unaccountedPoly2_source</h2>
<div class="item">
<div class="PrivateItem">
<input type="checkbox" onchange="layerStatusChanged(this)" id="Private1" name="Private" checked="checked" value="2543" class="ui-helper-hidden-accessible">
<label for="Private1" class="button_text" role="button" aria-disabled="false"><span class="ui-button-text">Приватный</span></label>
</div>
<div class="AccessoryItem">
<input type="checkbox" onchange="layerAccessoryChanged(this)" id="Item0" name="Items" checked="checked">
<span>unaccountedPoly2 source</span>
</div>
</div>
</div>
<div class="source">
<h2>Poly_source</h2>
<div class="item">
<div class="PrivateItem">
<input type="checkbox" onchange="layerStatusChanged(this)" id="Private1" name="Private" checked="checked" value="2543" class="ui-helper-hidden-accessible">
<label for="Private1" class="button_text" role="button" aria-disabled="false"><span class="ui-button-text">Приватный</span></label>
</div>
<div class="AccessoryItem">
<input type="checkbox" onchange="layerAccessoryChanged(this)" id="Item0" name="Items" checked="checked">
<span>Poly source</span>
</div>
</div>
</div>
</body>
</html>
|
Цитата:
http://angular.github.io/angular-phonecat/step-3/app/ |
спасибо большое за ответы!
|
| Часовой пояс GMT +3, время: 18:18. |