Selecting a div corresponding to TD on click w/jQuery

Question

I have a table. When I click on(within) a TD I need to show a hidden div that contains several more divs inside. Each div inside that hidden container has a text value. I need to select the one which value corresponds to the clicked TD.

JS

$(".clickme").click(function(){
    $("#hiddenDiv").hide().fadeIn(200);

    if ($(this).text() == $("#hiddenDiv div").text()) {
         //  HOW DO I SELECT THAT DIV? 
         // matched div .css("color", "red");  
    }

});

HTML

<table id="myTbl">
<tr>
  <td></td>
  <td class="clickme">Left</td>  
</tr>
</table>

<div id="hiddenDiv" style="display:none">
  <div>Straight</div>
  <div>Left</div>
  <div>Right</div>
</div>

score 3 · Answer 1 · answered May 17 '12 at 21:48

3

Use :contains to select the correct one:

$("#hiddenDiv div:contains(" + $(this).text() + ")")

answered May 17 '12 at 21:48

McGarnagle

101,349
31
229
260

contains is not like the `==` that was used in the question. – gdoron May 17 '12 at 21:50
1

Don't think there should be a space between `div` and the `:contains()`. – David Thomas May 17 '12 at 21:50
@gdoron I think it's more than sufficient for the scope of the problem, don't you? – McGarnagle May 17 '12 at 21:51

Roko C. Buljan · Accepted Answer · 2012-05-17T22:00:46.193

1

demo jsBIn

$(".clickme").click(function(){

    var thisText = $(this).text();
    var $targetEl =  $('#hiddenDiv > div:contains('+thisText+')');

    if( $targetEl.length > 0 ){  // if exists
          $("#hiddenDiv").hide().fadeIn(200);
         $targetEl.css({color:'red'});
    }

});

edited May 17 '12 at 22:00

answered May 17 '12 at 21:55

Roko C. Buljan

196,159
39
305
313

score 0 · Answer 3 · answered May 17 '12 at 21:48

0

$(".clickme").click(function() {
    $("#hiddenDiv").hide().fadeIn(200);
    var $this = $(this);
    $("#hiddenDiv div").filter(function() {
        return $(this).text() == $this.text();
    }).css("color", "red").show();
});

answered May 17 '12 at 21:48

gdoron

147,333
58
291
367

@Sagiv. Read the answer again... you're wrong! `var $this = $(this);` – gdoron May 17 '12 at 21:50
u right, i didn't notice. but it's good practice to avoid $this syntaks since it's confusing specially if you compare it to $(this) – Sagiv Ofek May 17 '12 at 21:57
@Sagiv. `$this` is a very common use. Read this: [Is there any specific reason behind using $ with variable in jQuery](http://stackoverflow.com/q/10204606/601179) – gdoron May 17 '12 at 22:00
it's all depends on the context. i think that line like '$(this).text() == $this.text();' can be right, but confusing and should be rewrite. – Sagiv Ofek May 17 '12 at 22:05

Selecting a div corresponding to TD on click w/jQuery

3 Answers3