Differentiate types of HTML elements in JavaScript or jQuery

Question

Differentiate types of HTML elements in JavaScript or jQuery

Navigation

#1 by (11 votes)
#2 by (3 votes)
#3 by (-2 votes)

8

I have a series of labels in my view JSP . Each label shows a unit of measure and if you want to edit it, it is replaced via javascript with a input via button.

NOTE: both the labels and the input are elements with class="CCC_UNIDAD" to iterate later. The% co_of resulting simplified% would be something like this:

<label class="CCC_UNIDAD">%</label>
<input class="CCC_UNIDAD">
<input class="CCC_UNIDAD" value="$">
<label class="CCC_UNIDAD">€</label>

$.each($(".CCC_UNIDAD"), function (index, value) {
    var valor = value.textContent === undefined 
                                  ? (value.value === undefined ? "" : value.value) 
                                  : value.textContent; 
    alert("VALOR = " + valor);
});

As you can see, in the snippet, I try to take the value of the label ( html ), if I do not have it I look for the value of the input value.textContent but it is not working correctly.

How can I differentiate which type of element is the variable value.value to get the attribute corresponding to each type?

javascript jquery html

asked by Jordi Castilla 03.12.2015 в 12:32

source

3 answers

3

You can use the property nodeName , here is an example.

(you must open the F12 console to see the results)

note: the input element, in html5, does not have a closing tag. It is initialized as seen below.

$(document).ready(function() {
  $.each($(".CCC_UNIDAD"), function(index, value) {
    if (value.nodeName === "INPUT") {
      console.log(value.value);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="CCC_UNIDAD">Label1</label>
<input class="CCC_UNIDAD" value="v1">
<input class="CCC_UNIDAD" value="v2">
<label class="CCC_UNIDAD">Label2</label>

answered by 03.12.2015 в 13:32

-2

If you want to know the tag of the object you can do this (with your code):

var objetos = document.getElementsByClassName('CCC_UNIDAD');

for(index in objetos){
  console.log(objetos[index].tagName);
}

The .tagName tells you if it's 'DIV', 'INPUT', 'TABLE', etc ...

answered by 03.12.2015 в 13:13

Encrypt RSA in C # decrypt in java Hide the text of a div using CSS

score 11 · Accepted Answer

First of all, as mentioned by @rnrneverdies, HTML is not well formed. Input tags do not carry a closing tag but are closed.

The correct form should be:

<label class="CCC_UNIDAD">%</label>
<input class="CCC_UNIDAD" value=""/>
<input class="CCC_UNIDAD" value="$" />
<label class="CCC_UNIDAD">€</label>

Then to get the value or the text you can use the operator ||

$(".CCC_UNIDAD").each(function(){
    alert("VALOR = " + ($(this).val() || $(this).text()));
});

Finally in your case everything would be like the sgte snippet

$("button").click(function(){
    $(".CCC_UNIDAD").each(function(){
        alert("VALOR = " + ($(this).val() || $(this).text()));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label class="CCC_UNIDAD">%</label>
<input class="CCC_UNIDAD" value=""/>
<input class="CCC_UNIDAD" value="$" />
<label class="CCC_UNIDAD">€</label>	
<button>Hazme clic me para probar</button>