Показывать только li и соответствующие элементы, которые содержат видимый и скрытый текст, соответствующий условиям поиска? - PullRequest
Новая
       16

Показывать только li и соответствующие элементы, которые содержат видимый и скрытый текст, соответствующий условиям поиска?

0 голосов
/ 21 декабря 2011

У меня есть это: 

<ul id="container">  
  <li class="sub_container">  
    <a> + text + </a><span> + text + </span><span> + text + </span>  
    <span> + text + </span><a> + text + </a><div> + text + </div>  
    <hr></hr>  
  </li>
  <li class="sub_container">  
    <a> + text + </a><span> + text + </span><span> + text + </span>  
    <span> + text + </span><a> + text + </a><div> + text + </div>  
    <hr></hr>  
  </li>  
</ul>

, и я хочу иметь возможность искать некоторый видимый и скрытый текст (если это возможно), поэтому, где есть соответствующий термин в пределах + text + внутри любого <li>теги, только те релевантные теги и все содержащиеся в них элементы (которые также включают в себя их + text +) остаются видимыми, в то время как все остальные <li> и содержащиеся в них элементы становятся скрытыми.Выше показан пример набора из двух <li> и содержащихся в них элементов, но эти теги и элементы будут динамически размножаться - только содержимое + text + изменяется (+ text + части взяты из электронной таблицы).

Я пыталсяэто для поиска, где #find является ссылкой для активации поиска, а #filter является полем ввода для ввода условий поиска: 

$jq("#find").click(function(){
  $jq("ul li").hide()
  .filter(":contains('"+ $jq("#filter").val() +"')").show()
  return false;
})

Работает, но скрывает только следующие 2 элемента (в этомрегистр <a> и <span>), расположенный сразу после открывающего тега <li>.Я попробовал этот плагин на http://lomalogue.com/jquery/quicksearch/, но он не дал результатов.Любая простая функция щелчка, как выше, будет оценена.Спасибо за руководство по работе с образцом.

1 Ответ

0 голосов
/ 24 января 2012

Эта посылка кода наконец помогла: 

$jq("span.numbers, div.timestamp, span.title, div.text, hr").hide();
$jq(".text:containsIgnoreCase("+ $jq(".search").val() +")").show("fast");
$jq(".text:containsIgnoreCase("+ $jq(".search").val() +")").prev("span").show("fast");
$jq(".text:containsIgnoreCase("+ $jq(".search").val() +")").prev("span").prev("div").show("fast");
$jq(".text:containsIgnoreCase("+ $jq(".search").val() +")").prev("span").prev("div").prev("span").show("fast");
$jq(".text:containsIgnoreCase("+ $jq(".search").val() +")").next("hr").show("fast");

Приведенный выше код скрывает все элементы, а , а затем показывает элементы, соответствующие условиям поиска, я думаю, вы могли бы сделать это наоборот. Заголовки и другие элементы (родственные элементы, связанные и расположенные над элементами, содержащими поисковые термины) отображаются соответственно. Это прекрасно работает для динамически вставляемых данных, поступающих из электронной таблицы, например, когда #id s не может использоваться и каждый раздел данных использует те же элементы .class.

...