0

Os cuento:

Tengo el siguiente código:

    var testimonialElements = $(".GRID");
    for(var i=0; i<testimonialElements.length; i++){
     $('th:visible:eq(0)').css("border-radius","6px 0 0 6px");
    }

Lo que quiero hacer es aplicar ese estilo CSS al primer elemento th visible de cada una de las dos tablas que tengo. En cambio, tan solo me lo aplica al primer elemento th visible de la primera tabla.

Tengo chequeado que testimonialElements.length vale 2, eso es correcto. ¿De qué forma debería ser la instrucción de dentro del for para que me lo aplique al primer TH visible de cada una de las dos tablas de la clase GRID?

Un saludo y gracias

EDITO: Código HTML de las tablas

<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
        <td style="display: none;">57</td>
        <td>D1</td>
        <td>D1</td>
        <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
        <td style="display: none;">58</td>
        <td>D2</td>
        <td>D2</td>
        <td>D2</td>
    </tr>   
  </tbody>
</table>


<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
        <td style="display: none;">57</td>
        <td>D1</td>
        <td>D1</td>
        <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
        <td style="display: none;">58</td>
        <td>D2</td>
        <td>D2</td>
        <td>D2</td>
    </tr>   
  </tbody>
</table>

3
  • pódrias incluir tu codigo de las tablas...como estan formadas..!! el 16 oct. 2018 a las 16:25
  • ese eq(0) es equivalente a decir "la primera ocurrencia" o "la ocurrencia con índice 0" simplemente saca esa parte del selector y déjalo así 'th:visible'
    – LPZadkiel
    el 16 oct. 2018 a las 17:22
  • Claro. aquí van. Lo del eq 0 si lo quito acaba por aplicar el estilo a todos los th y no es lo que quiero, solo debería afectar al primer th no oculto de cada una de las tablas. el 17 oct. 2018 a las 6:50

1 respuesta 1

0

Para este caso específico podes usar un .each() para las tablas de clase .GRID y dentro de la iteración buscar con find() los th:visible y aplicar el css sólo al primero con .first().

$('.GRID').each(
  function() {
    $(this).find('th:visible').first().css({
      borderRadius: "6px 0 0 6px",
    });
  }
);

$('.mTabla').each(
  function() {
    $(this).find('th:visible').first().css({
      background: "yellow",
      borderRadius: "6px 0 0 6px",
    });
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>
  </tbody>
</table>


<table class="mTabla" id="sdsdsdsf2" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>
  </tbody>
</table>


Para casos mas generales del tipo "aplicar CSS al primer elemento de tipo+clase X en varios grupos" donde "primer" es relativo al grupo (y no siempre es el :first-child o :first-of-type), hay varias opciones, aquí hay 3, la tercera es la mas compacta (busca, filtra, aplica css).

Opción 1

Modificar todos los th:visible y "desmodificar" todos los th que no son el primer th:visible (todo th que sea hermano y esté a continuación de un th:visible)

$("th:visible").css({
  borderRadius: "6px 0 0 6px",
});
$("th:visible~th").css({
  borderRadius: 0,
});

$("th:visible").css({
  background: "yellow",
  borderRadius: "6px 0 0 6px",
});
$("th:visible~th").css({
  background: "none",
  borderRadius: 0,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>
  </tbody>
</table>


<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>
  </tbody>
</table>


Opción 2

Variación del caso específico. No muy eficiente pero permite no saber el parent a priori, para todos los th:visible buscar el elemento padre y por cada padre buscar el primer th:visible

$("th:visible").parent().each(function() {
  $(this).find("th:visible").first().css({
    borderRadius: "6px 0 0 6px",
  })
});

$("th:visible").parent().each(function() {
  $(this).find("th:visible").first().css({
    background: "yellow",
    borderRadius: "6px 0 0 6px",
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>
  </tbody>
</table>


<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>
  </tbody>
</table>


Opción 3

Variación de opción 1 usando el filtro .not() de jQuery, encuentra todos los th:visible e ignora aquellos th hermanos que estén precedidos por un th:visible

$("th:visible").not("th:visible~th").css({
  borderRadius: "6px 0 0 6px",
});

$("th:visible").not("th:visible~th").css({
  background: "yellow",
  borderRadius: "6px 0 0 6px",
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>
  </tbody>
</table>


<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">57</td>
      <td>D1</td>
      <td>D1</td>
      <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
      <td style="display: none;">58</td>
      <td>D2</td>
      <td>D2</td>
      <td>D2</td>
    </tr>
  </tbody>
</table>


Notas

Opción 1 y opción 3 basados en la respuesta https://stackoverflow.com/a/8539107/1423096 de BoltClock

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.