Форум

git_bind · #1 (**permalink**) 28.09.2015, 12:18

Добрый день! В 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>

рони · #2 (**permalink**) 28.09.2015, 12:22

Сообщение от git_bind

необходимо при вводе в input

где?

git_bind · #3 (**permalink**) 28.09.2015, 12:34

ну например <input type="text" id="text-search" />

рони · #4 (**permalink**) 28.09.2015, 12:56

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>

git_bind · #5 (**permalink**) 28.09.2015, 14:16

супер, спасибо! а можно как-то сделать поиск по символьно? например:

<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"

рони · #6 (**permalink**) 28.09.2015, 14:20

Сообщение от git_bind

если в input вводить посимвольно "P" "o" "l" "y" то чтобы показывалось оба div, но если еще добавить " "(пробел), то остался последний div где в span записано "Poly source"

не осилил логику

git_bind · #7 (**permalink**) 28.09.2015, 14:22

ну то есть, при вводе поочередно каждого символа(как при событии keyup) проверялись все span на вхождение символа в строку записанную в span

рони · #8 (**permalink**) 28.09.2015, 14:35

Сообщение от git_bind

ну то есть, при вводе поочередно каждого символа(как при событии 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>

ksa · #9 (**permalink**) 28.09.2015, 14:39

Сообщение от git_bind

если в input вводить посимвольно "P" "o" "l" "y" то чтобы показывалось оба div, но если еще добавить " "(пробел), то остался последний div где в span записано "Poly source"

Ангулар подключай!

http://angular.github.io/angular-phonecat/step-3/app/

git_bind · #10 (**permalink**) 28.09.2015, 15:18

спасибо большое за ответы!

Форум

Справочник

Discord чат

Курсы javascript