Quiero agregar la clase .red-border a un div #container y todos los <td> s en el <tr> más cercano.

Pero al usar .closest () solo obtengo los elementos padre inmediato <td>.

¿Hay alguna manera de que pueda dirigirme a todos los hijos de los <tr> más cercanos?

Mi codigo esta abajo.

Mi JS erróneo actual:

$('#myelement').closest('.container, tr td').addClass('red-border');

Obviamente, esto solo apunta a 1 td. Quiero abarcarlos a todos.

Mi HTML:

<div id="container">
 <span class="myelement">element</span>
</div>

<table>
  <tr>
    <td></td>
    <td><span class="myelement">element</span></td>
    <td></td>
  </tr>
</table>

Editar: normalmente podría usar la función .find() pero esto no funcionaría con el operador or.

0
MeltingDog 12 may. 2016 a las 07:11

4 respuestas

La mejor respuesta

Espero que esto sea lo que esperas. Debe recorrer cada tr y agregar clase red-border a su primer td con el selector td:first como se muestra a continuación

$(document).ready(function() {
  $('#container').addClass('red-border');
  $('tr').each(function(){
    $(this).find('td:first').addClass('red-border');
  })
})
.red-border{
  border:red 2px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <span class="myelement">element</span>
</div>

<table>
  <tr>
    <td>First row First TD</td>
    <td><span class="myelement">element</span>
    </td>
    <td></td>
  </tr>
  <tr>
    <td>Second row First TD</td>
    <td><span class="myelement">element</span>
    </td>
    <td></td>
  </tr>
</table>
2
Guruprasad Rao 12 may. 2016 a las 04:22

¿Por qué lo quieres en una sola línea? solo divídalo en dos, será más simple.

$('.myelement').closest('#container').addClass('red-border');
$('.myelement').closest('tr').find('td').addClass('red-border');

Por cierto, llamaste a #myelement cuando tu etiqueta tenía una clase myelement. Debe llamarse usando .myelement. Y el contenedor es una identificación, así que #container

1
Shiran Dror 12 may. 2016 a las 04:21

Llame al elemento de clase utilizando .myelement en lugar de #myelement

$('.myelement').closest('.container, tr td').css({"color": "red", "border": "2px solid red"});

O

$('.myelement').closest('.container, tr td').addClass('red-border');
1
Swetha 12 may. 2016 a las 04:26

De acuerdo con su estructura, puede optar por esto:

$(".myelement").parents("#container").addClass('red-border').siblings("table").find("tr").eq(0).children().addClass('red-border');

Apunte al padre #container usando parents(). Esto no dará nada para span dentro de td. Luego apunte a su hermano table y al primer tr usando eq(0).

1
Developer107 12 may. 2016 a las 04:32