Jquery. Find all containing text from selected

Question

I try to show all lines contaning selected text from option after click on button, this is my code:

<select>
 <option>text1</option>
 <option>text2</option>
 <option>text3</option>
 <option>text4</option>
</select>
<button class="show"></button>
<button class="hide"></button>
<table>
 <tr>
  <td>text1</td><td>....</td>
 </tr>
 <tr>
  <td>text2</td><td>....</td>
 </tr>
 <tr>
  <td>text3</td><td>....</td>
 </tr>
 <tr>
  <td>text1</td><td>....</td>
 </tr>
</table>

I try to do something like this but it doesnt work:

$(function(){
  b = $("tr");
  $(".show").on("click", function(){
   var a = $("select option:selected").text();
   $(b).hide();
   if ($("tr:contains('"+a+"')").length) 
    $(this).closest(tr).show();
 });

 $(".hide").on("click", function(){
  $(b).show();              
 });    
});

Can someone help me, pls :)

Not related with question: since `b` is already jQuery object, there is no need to wrap it with `$()`. You can simply use `b.hide()` and `b.show();` — Regent, Nov 07 '14 at 12:34
possible duplicate of [jquery find element by text](http://stackoverflow.com/questions/7321896/jquery-find-element-by-text) — danguilherme, Nov 07 '14 at 12:34
What will happen if use contains with `td` instead of `tr`and reading the parent tr object? — Reporter, Nov 07 '14 at 12:37

Amit Joki · Answer 1 · 2014-11-07T14:40:10.697

3

You need something like this. Don't pollute global space and use proper selectors. And there is no need to wrap a jQuery object again.

$(function() {
    var b = $("table");
    $(".show").on("click", function() {
        var a = $("select option:selected").text();
        b.find("tr").hide().end().find("td:contains('" + a + "')").parent().show();
    });
    $(".hide").on("click", function() {
        b.find("tr").show();
    });
});

edited Nov 07 '14 at 14:40

answered Nov 07 '14 at 12:35

Amit Joki

58,320
7
77
95

@MohitArora while chaining is indeed possible, it doesn't really "good" code, since code line is very long and difficult to read-understand on **quick** view. – Regent Nov 07 '14 at 12:43
@AmitJoki `var b = $("table");` should be inside `$(function() {});` - otherwise it will not work at all, if ` – Regent Nov 07 '14 at 12:54
@Regent yup, I copied OP's code which had bad indentation so, that blocks were different, which is why I had put that outside. Only now, I realised and edited. Thanks mate :) – Amit Joki Nov 07 '14 at 14:41

score 2 · Accepted Answer · answered Nov 07 '14 at 12:34

2

Try this : You can use each to check each tr for selected option text and make it visible. No need to use closest('tr') as $(this) itself is a TR.

$(function(){
  b = $("tr");
  $(".show").on("click", function(){
   var a = $("select option:selected").text();
   b.hide();
   //if ($("tr:contains('"+a+"')").length) 
   // $(this).closest(tr).show();
   b.each(function(){
     if($(this).text().indexOf(a)!=-1)
     {
       $(this).show();
     }
  });
 });

 $(".hide").on("click", function(){
  b.show();              
 });    
});

answered Nov 07 '14 at 12:34

Bhushan Kawadkar

28,279
5
35
57

Instead you should use toggle: `$(this).toggle($(this).text().indexOf(a)!=-1);` and don't hide all `b` by default – A. Wolff Nov 07 '14 at 12:41
@A.Wolff mm I know about .toggle() but I think it would be necessary to me if I had one button to show and hide, no? – unknown163 Nov 07 '14 at 12:45
@A.Wolff not _should_, but _can_. Actually `b.hide();` and `b.filter(":contains('" + a + "')").show();` is shorter and easier. – Regent Nov 07 '14 at 12:47
I'd recommend relying on the `onclick` property of buttons rather than using classes to trigger this action. Also, I'd recommend isolating the functions to the table in question to minimize impact. – charles Nov 07 '14 at 12:47
@BhushanKawadkar not enough reputation for +1 :( – unknown163 Nov 07 '14 at 12:49
@Regent `should` was regarding code in this specific answer :) And ya, i prefer your way, more readable ;) – A. Wolff Nov 07 '14 at 12:54

score 1 · Answer 3 · answered Nov 07 '14 at 12:38

You can't use contains cause match any element that simple contains test(Select all elements that contain the specified text). Bu you can use each and match any td with same text and show parent(tr) like:

b = $("tr");
$(".show").on("click", function() {
  var a = $("select option:selected").text();
  $(b).hide();
  $("td").each(function() {
    if ($(this).text() == a) {
      $(this).parents("tr").show();
    }
  });
});

$(".hide").on("click", function() {
  $(b).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>text1</option>
  <option>text2</option>
  <option>text3</option>
  <option>text4</option>
</select>
<button class="show">show</button>
<button class="hide">hide</button>
<table>
  <tr>
    <td>text1</td>
    <td>....</td>
  </tr>
  <tr>
    <td>text2</td>
    <td>....</td>
  </tr>
  <tr>
    <td>text3</td>
    <td>....</td>
  </tr>
  <tr>
    <td>text1</td>
    <td>....</td>
  </tr>
</table>

score 0 · Answer 4 · answered Nov 07 '14 at 12:44

Make your buttons run functions directly here.

function show() {
   var needle = $("select option:selected").text();
   $('#myTable td').each(function() {
        if ($(this).text() === needle) $(this).show();
   });
}
function hide() {
   var needle = $("select option:selected").text();
   $('#myTable td').each(function() {
        if ($(this).text() === needle) $(this).hide();
   });
}

Take a look at this (jsFiddle).

Jquery. Find all containing text from selected

4 Answers4