Find the nth div with a certain class

Question

This should also work on IE8

My tr rows element has multiple td elements which each td contains multiple divs. Some divs has the class "cell-data"

In all these divs on one row. I am trying to find and manipulate the second and third div with the class "cell-data"

I can get the first child correctly but not the third one. I searched here on SO also tried eq() method but still cant find.

$( ".rows" ).each(function() {
    var height = $(this).find('.cell-data:nth-child(1)').css("height");
    var height3= $(this).find('.cell-data:nth-child(3)').css("height") ;
});

And Html looks like this

                  <tr class="rows">
                                    <td class="cell-td">  
                                        <div class="row">
                                            <div class="col-3">
                                                <div>
                                                </div>
                                            </div>
                                            <div class="col-3">
                                                <div  class="cell-data">

                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="cell-td">

                                            <div class="cell-data" >

                                                </span>
                                            </div>


                                    </td>
                                    <td class="cell-td">
                                        <div class="cell-data">

                                        </div>
                                    </td>
                                </tr>

Remember that `nth-child()` doesn't work with some versions of IE — CompanyDroneFromSector7G, Oct 23 '14 at 12:30
You can't have a div inside a span
. And you have other tags not closed properly — Bojan Petkovski, Oct 23 '14 at 12:41
You should validate your markup. You have quite some errors. — Bram Vanroy, Oct 23 '14 at 12:43
Yes, validation errors, also - you only have a single `cell-data` div inside each td, hence you can't get the third child when there is only one in each. — VLAZ, Oct 23 '14 at 12:50
@Vld tnx now it works when take into account the tds, using nth-of-type will work on IE-8? — Spring, Oct 23 '14 at 13:03
It wouldn't for CSS, but this is jQuery selector - jQuery implements its own search, so it should work. — VLAZ, Oct 23 '14 at 13:04

score 1 · Answer 1 · answered Oct 23 '14 at 12:25

1

.cell-data:nth-child(3) does not give you the third div with the class. It gives you the third child of the parent instead.

Use .cell-data:nth-of-type(3) instead.

answered Oct 23 '14 at 12:25

simonzack

19,729
13
73
118

tnx but still undefined – Spring Oct 23 '14 at 12:32

score -2 · Answer 2 · answered Oct 23 '14 at 15:16

As @Vld suggested problem was due to the td elements, so I fixed by;

$(".rows").each(function () {
        var td1 = $(this).find('.cell-td:nth-of-type(1)');
        var td2 = $(this).find('.cell-td:nth-of-type(2)');
        var td3 = $(this).find('.cell-td:nth-of-type(3)');

        var height = $(td1).find('.cell-data:nth-of-type(1)').css("height");
        $(td2).find('.cell-data:nth-of-type(1)').css("height", height);
        $(td3).find('.cell-data:nth-of-type(1)').css("height", height);
    });

Find the nth div with a certain class

2 Answers2