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

区分 JavaScript 或 jQuery 中的 HTML 元素类型

  • 772

我有一系列labels在我看来JSP。每个都label显示一个度量单位，如果您想编辑它，它会通过 javascript 由inputvia 按钮替换。

注意：标签和输入都是带有 class="CCC_UNIDAD" 的元素，以便稍后对其进行迭代。简化后的html结果如下所示：

<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);
});

如您所见，在片段中，我尝试获取标签 ( value.textContent) 的值，如果没有，我会查找输入的值，value.value但它无法正常工作。

如何区分变量是什么类型的元素value，以便获得每种类型对应的属性？

javascript

3 Answers

  1. Best Answer

    首先，@rnrneverdies 提到 HTML 格式不正确。输入标签没有结束标签，但是是自闭合的。

    正确的形式应该是：

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

    然后要获取值或文本，您可以使用运算符||

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

    最后在你的情况下，一切都将作为下一个片段

    $("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. 您可以使用该属性nodeName，这是一个示例。

    （您需要打开 F12 控制台才能看到结果）

    注意：输入元素，在 html5 中，没有结束标签。它被初始化如下所示。 

    $(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. 如果您想知道对象的标签，您可以这样做（使用您的代码）：

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

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

    .tagName 告诉您它是“DIV”、“INPUT”、“TABLE”等...

    • -3