4

Lo que me gustaría hacer es obtener el id de un elemento que tenga un borde diferente, en este caso que su borde sea rojo, para poder procesarlo en otro método.

Código actual:

if ($('#txtNombreP').hasClass('borcolo')) {
    alert('El elemento tiene borde rojo');
} else {
    alert('El elemento tiene borde blanco');
}

El código de arriba me identifica que borde tiene mi elemento, ahora ya que se que borde tiene, me gustaría obtener el id de dicho elemento. tengo 20 elementos dentro de esta ventana y mas en otros formularios al cual se va aplicar este método, por lo cual no creo que se pueda hacer dentro del if, seria mucho código.

5
  • ¿es específicamente a varios mismos elementos los que deseas aplicarles el if?
    – Jorius
    el 23 feb. 2017 a las 20:28
  • @Jorius no, a veces hay selects, pero en su mayoria son cajas de texto.
    – David
    el 23 feb. 2017 a las 20:28
  • ¿estos elementos están siempre de algún div padre?
    – Jorius
    el 23 feb. 2017 a las 20:29
  • @Jorius si tienen un div contenedor
    – David
    el 23 feb. 2017 a las 20:30
  • @David publique mi respuesta, pero no funciona, lo puedes agregar a tu pregunta, para complementarlo? el 23 feb. 2017 a las 20:46

2 respuestas 2

2

Acá te dejo este ejemplo que muestra como puedes recorrer los elementos que posean una clase especifica y también para los que no la posean.

$( document ).ready(function() {    
    $.each($(".borcolo"), function(index, item){
      //Acá tu código para los que tienen la clase borcolo
      alert(item.id);
    });
    
    $.each($(":not(.borcolo)"), function(index, item){
      //Acá tu código para los que no tienen la clase borcolo
      
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type="text" id="element1" class="borcolo"/></div>
<div><input type="text" id="element2" class="borcolo"/></div>
<div><input type="text" id="element3" class="borcolo"/></div>
<div><input type="text" id="element4" class="nocolo"/></div>
<div><input type="text" id="element5" class="nocolo"/></div>

1

Según esto que dices:

Lo que me gustaria hacer es obtener el id de un elemento que tenga un borde diferente, en este caso que su borde sea rojo, para poder procesarlo en otro metodo.

Y esto siguiente...

me gustaria obtener el id de dicho elemento. tengo 20 elementos dentro de esta ventana y mas en otros formularios al cual se va aplicar este metodo, por lo cual no creo que se pueda hacer dentro del if. seria mucho codigo

Estoy seguro que este código te puede ser de ayuda, simplemente recorres todos los elementos hijos de tu elemento padre y haces la validación del if retornando el id de dicho elemento en cada caso

function someMethod(selector){
  $(selector).removeClass('redBorder');
  $(selector).addClass('orangeBorder');
}

$(document).ready(function(){
  $('#container').children().each(function () {
    var id = $(this).attr('id');
    var hasClass = $(this).hasClass('redBorder');
    
    // Esta validación es para saltarnos los elementos
    // que no tienen un atributo de id, tales como
    // los <br /> que están en el documento 
    if(typeof(id) !== 'undefined' && hasClass){ 
      console.log('El elemento con id ' + id + ' tiene borde rojo!');
      
      // Procedemos a aplicar el método o función que deseamos a nuestro elemento
      setTimeout(function(){
        someMethod('#' + id);
      }, 2000);
    }else if(typeof(id) !== 'undefined' && !hasClass){
      console.log('El elemento con id ' + id + ' tiene borde azul!');
    }
  });
});
*{
  font-family: Arial;
}

#container{
  width: 400px;
  height: auto;
  border: 1px solid black;
  padding: 15px 0px 15px 15px;
}

.redBorder{
  border: 1px solid red;
}

.blueBorder{
  border: 1px solid blue;
}

.orangeBorder{
  border: 1px solid orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <span id="span_id" class="blueBorder">Este es un elemento cualquiera</span> <br /><br />
  <input id="input_id" type="text" value="Otro elemento cualquiera" class="redBorder" /><br /><br />
  <select id="select_id" class="redBorder">
    <option>Soy un select</option>
    <option>Yay, otra opción!</option>
  </select>
</div>

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.