How to access DOM element using Selector?

Question

I'm trying to use jQuery selector to access the DOM deep inside.

HTML

<table>
...more stuff here
  <tr>
    <td class="foo bar clickable">
      <div>
         <div class="number">111</div> //I want to get the value "111"
         <div class="content"></div>
      </div>
    </td>
    <td class="foo2 bar2 clickable">
      <div>
         <div class="number">222</div>
         <div class="content"></div>
      </div> 
    </td>
  </tr>
...more stuff here
</table>

So a user clicks on td and then I want to popup the alert with "111" shown.

In order to access <div class="number">111</div> part, I wrote the jQuery selector:

j$(".clickable").click(function() {

   //trying to output 111               
   alert( j$("this div div.number").text());
}

which returns blank alert box.

alert( j$("this div.number").text());

alert( j$("this div .number").text());

Tried few combination I can think of and all gave me blank alert. What am I doing wrong?

mu is too short · Accepted Answer · 2011-05-12 02:56:24Z

3

You don't have a <this> element anywhere so this div.number won't work. If you want to start at this and find the contained div.number, then you want to use .find like this:

j$(this).find('div.number').text()

Alternatively, you could use the context argument to jQuery:

j$('div.number', this).text()

answered May 12, 2011 at 2:56

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Meow Over a year ago

I guess I was using "this" in wrong way, now I'm clear, thank you!

mu is too short Over a year ago

@masato-san: Right, this is a JavaScript keyword that doesn't mean anything in a selector. You may have seen the j$('div.number', this).text() form of a jQuery call before but I prefer using .find as it is easier to tell what's going on at a glance.

James Montagne · Accepted Answer · 2011-05-12 02:56:44Z

2

Try this instead:

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

   //trying to output 111               
   alert( $(this).find("div div.number").text());
});

I don't believe "this" in quotes has any meaning.

answered May 12, 2011 at 2:56

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

2 Comments

mu is too short Over a year ago

The "this" in the selector tells jQuery to look for a <this> element just like a "div" selector tells jQuery to look for a <div> element.

James Montagne Over a year ago

@mu right, I guess I didn't word that correctly. I meant more as a reference to current element, it doesn't work. If there were a <this> tag in the page then I guess it would match that.

radosch · Accepted Answer · 2011-05-12 03:01:31Z

0

try this code and practice with fiddler: http://jsfiddle.net/

You can paste in your HTML and your JS Code and simulate any Enviroment / Framework you want.

answered May 12, 2011 at 3:01

radosch

6193 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to access DOM element using Selector?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related