jquery select nested div

Question

How do I select div that contains "my content"?

<table>
  <tr>
    <td class="ms-disc-bordered-noleft">
      <div class="">
        <div>some content</div>
        <div>my content</div>
      </div>
    </td>
  </tr>
</table>

what relation does that div has with td.ms-disc-bordered-noleft?

first div has empty class, two divs that contain the actual content have no divs-- these divs are dynamically created.. — Athapali
– Athapali, Commented Jan 10, 2013 at 21:58
I have no control over the markup or i would make it more elegant.. — Athapali
– Athapali, Commented Jan 10, 2013 at 22:03
Sarika, you have to really explain, do you need the last element , or containing exactly the text my content. your question is so hard to decipher — Roko C. Buljan
– Roko C. Buljan, Commented Jan 10, 2013 at 22:08

Jeromy French · Accepted Answer · 2013-01-11 16:30:15Z

5

$('.ms-disc-bordered-noleft div:last')
$('.ms-disc-bordered-noleft div:eq(2)')
$('.ms-disc-bordered-noleft').find('div:eq(2)');
or $("div:contains('my content'):last");

return the droid...I mean div...you are looking for.

I have a feeling that $('.ms-disc-bordered-noleft div:last') is your best option; my performance test shows that it is generally the fastest of the 4 proposals (FireFox prefers $('.ms-disc-bordered-noleft').find('div:eq(2)');).

See http://jsfiddle.net/jhfrench/cfeZU for examples of the different selectors in use.

As for the second part of your question, that div is a 'descendant' of the td.ms-disc-bordered-noleft element. More specifically, it is the child of the td's child.

edited Jan 11, 2013 at 16:30

answered Jan 10, 2013 at 22:10

Jeromy French

12.1k19 gold badges79 silver badges136 bronze badges

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

1 Comment

Athapali Over a year ago

Thanks for all the effort! Very illustrative!

VisioN · Accepted Answer · 2013-01-10 22:00:39Z

3

One option as second child of inner <div>:

var div = $(".ms-disc-bordered-noleft > div > div:eq(1)");

edited Jan 10, 2013 at 22:00

answered Jan 10, 2013 at 21:55

VisioN

146k35 gold badges287 silver badges291 bronze badges

1 Comment

VisioN Over a year ago

@FelixKling Yes, that's always unpredictable :/

Rob · Accepted Answer · 2013-01-10 21:57:43Z

1

It's a parent node, you can traverse up an down using .parent() and .children() or .find()

answered Jan 10, 2013 at 21:57

Rob

11.4k22 gold badges73 silver badges115 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2013-01-10 22:03:02Z

1

How do I select div that contains "my content"?

$('.ms-disc-bordered-noleft').find('div').contains("my content");

IF I did not understand well your Q. ...you can use:

$('.ms-disc-bordered-noleft div').find('div:last');

        ^^-parent         ^^-first children  ^^-last div

edited Jan 10, 2013 at 22:03

answered Jan 10, 2013 at 21:57

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

1 Comment

Jeromy French Over a year ago

$('.ms-disc-bordered-noleft').find('div').contains("my content"); would error; .contains() only works against a DOM element, not against a jQuery object (api.jquery.com/jQuery.contains).

Matthew Davis · Accepted Answer · 2013-01-10 22:50:04Z

1

Most direct route would be:

var div = $("div:contains('my content'):last");

As far as the relationship to the td goes, you could start with the above and work your way back.

var cell = div.closest('td');

These aren't necessarily the fastest options in terms of performance, but they are the shortest code. And I like short code.

edited Jan 10, 2013 at 22:50

answered Jan 10, 2013 at 22:02

Matthew Davis

1425 bronze badges

4 Comments

Jeromy French Over a year ago

$("div:contains('my content')"); would also return that div's container.

Jeromy French Over a year ago

$("div:contains('some content')");, for example, would return the last div and filter it for the 'some content' string...so $("div:last"); and $("div:last:contains('my content')"); return the same thing in this case...but $("div:contains('my content'):last"); works to return just the desired div

Matthew Davis Over a year ago

Never mind. I see what you're saying. Editing now. Again. LOL

Jeromy French Over a year ago

I don't know why I'm giving you such a hard time! There are 10,000 ways to do this with jQuery. I'm just enjoying testing out the different ways I don't usually try.

Devin McQueeney · Accepted Answer · 2013-01-11 00:08:53Z

0

.ms-disc-bordered-noleft div div:nth-child(2)

or

.ms-disc-bordered-noleft div div:last-child

answered Jan 11, 2013 at 0:08

Devin McQueeney

1,2872 gold badges14 silver badges31 bronze badges

Collectives™ on Stack Overflow

jquery select nested div

6 Answers 6

1 Comment

1 Comment

Comments

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related