How do I get the ID of an element with its border?

Question

How do I get the ID of an element with its border?

Navigation

#1 by (2 votes)
#2 by (1 votes)

4

What I would like to do is to obtain the id of an element that has a different edge, in this case its edge is red, to be able to process it in another method.

Current code:

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

The code above identifies what edge my item has, now that I know what border it has, I would like to obtain the id of that element. I have 20 elements within this window and more in other forms to which this method will be applied, so I do not think it can be done within the if, it would be a lot of code.

javascript jquery css

asked by David 23.02.2017 в 21:24

source

2 answers

1

According to this you say:

What I would like to do is get the id of an element that has a different border, in this case its edge is red, so that it can be processed in another method.

And this next ...

I would like to obtain the id of that element. I have 20 elements within this window and more in other forms to which this method is going to be applied, so I do not think it can be done within the if. it would be a lot of code

I am sure that this code can be helpful, you just go through all the child elements of your parent element and do the validation of the if returning the id of that element in each case

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>

answered by 23.02.2017 в 21:47

Login using the active directory in ASP.NET How to make my program appear in the list of Windows programs?

score 2 · Accepted Answer

Here I leave this example that shows how you can travel the elements that have a specific class and also for those who do not have it.

$( 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>