Home / Questions / 342
Accepted
Jordi Castilla
Asked: 2020-12-04 03:32:51 +0800 CST 2020-12-04 03:32:51 +0800 CST

Differentiate HTML element types in JavaScript or jQuery

  • 772

I have a series of labelsin my view JSP. Each labelshows a unit of measure and in case you want to edit it, it is replaced via javascript by a inputvia button.

NOTE: both the labels and the input are elements with class="CCC_UNIDAD" to iterate them later. The htmlsimplified result would look 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 get the value of the label ( value.textContent), if it does not have it, I look for the value of the input value.valuebut it is not working correctly.

How can I differentiate what type of element the variable is valuein order to get the attribute corresponding to each type?

javascript

3 Answers

  1. Best Answer

    First of all as @rnrneverdies mentions the HTML is not well formed. The input tags do not have a closing tag but are self-closing.

    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 as the next 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>

    • 12

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

    (you will need to 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>

    • 4

  3. If you want to know the object's tag 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...

    • -3