Find next table when click in a div

Question

I need get id or class from next table, for example, when I click in any div in blue square, get id or class from the table of red square.

If I use this:

$('div').click(function() {
    console.log($(this).next().find('table').attr('id));
});

But doesn't work! enter image description here

HTML CODE

<div id="statusServ">
    Status ::
    <div id="todosTicket" class="colorstatus">Todos</div>
    <div id="pendiente" class="colorpendiente colorstatus">Pendiente</div>
    <div id="atencion" class="coloratencion  colorstatus">En Atención</div>
    <div id="concluido" class="colorconcluido colorstatus">Concluido</div>
    <div id="cerrado" class="colorcerrado colorstatus">Cerrado</div> | Acciones ::
</div>
<i>Para visualizar los detalles del ticket, presione sobre la fila deseada.</i>
<table cellspacing="1" id="rBuscarServicio" class="tableResultsSearch tSeguimiento" name="rBuscarServicio">
    <thead>
        <tr>
            <th>#TKMA</th>
            <th>CLIENTE</th>
            <th>EMPRESA</th>
            <th>ING. ASIGNADO</th>
            <th>FECHA CREACIÓN</th>
            <th>OBSERVACIONES</th>
            <th style="display:none;">STATUS</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Your HTML has two elements with the ID statusServ. This is wrong. — Popnoodles, Mar 15 '13 at 03:01

score 2 · Accepted Answer · edited May 23 '17 at 10:24

2

next() only gets you to the next sibling, which in this case is the next blue <div/>.

You have to go up the tree to the <div/> that is sibling to the <div/> containing the <table/>.

In your example, the following should work.

Fiddle

$('#statusServ').children().click(function(){
    console.log(
        $(this)             // div that was clicked
            .parent().parent()       // #statusServ
            .find('table')         // #rBuscarServicio_wrapper
            .prop('id')     // 'rBuscarServicio'
    );
});

NOTE:

Generally it is best to use prop() instead of attr()

prop() vs attr()

edited May 23 '17 at 10:24

Community

1
1

answered Mar 15 '13 at 02:57

Aaron Blenkush

3,034
2
28
54

Doesn't work, for example I need an action for every div and I do this: $('#todosTicket').on('click',function() { console.log($(this).parent().next().find('table').attr('id')); }); ... I try with parent(). and parent().parent(). – SoldierCorp Mar 15 '13 at 03:04
@SoldierCorp this binds an action for every div with `$('#statusServ').children()` – Popnoodles Mar 15 '13 at 03:07
1

@popnoodles: There is nothing wrong with using `prop()` in this instance. `prop()` gets property of the underlying object, while `attr()` gets the attribute that was set in the markup. Though it may seem ridiculous in the case of an ID (which *should* never change), other properties could change. http://jsfiddle.net/AaronBlenkush/uyGyP/ – Aaron Blenkush Mar 15 '13 at 03:11
Not working, and in your code doesn't have method to get 'table', just get an ID but from who? Wait you edit again your answer.. i'll try – SoldierCorp Mar 15 '13 at 03:23

Jacob VanScoy · Answer 2 · 2013-03-15T15:05:07.763

1

$('div.colorstatus').click(function() {
  console.log($(this).closest('div.buscar').find('table').attr('id'));
});

EDIT (alternative for HTML provided at bottom of post):

$('div.colorstatus').click(function() {
  console.log($(this).parent('div').siblings('table').attr('id'));
});

edited Mar 15 '13 at 15:05

answered Mar 15 '13 at 03:09

Jacob VanScoy

1,168
6
14

Your example works, but I can't use closest to div.buscar because in other html file I have 2 tables in the same document and I need a function that get id or class of the next table of #statusServ – SoldierCorp Mar 15 '13 at 03:17
I'm sorry, not working but thanks for your time and help. Upvote for you! – SoldierCorp Mar 15 '13 at 03:32

Find next table when click in a div

2 Answers2

Fiddle