Question

好吧，我刚刚开始使用javascript，所以我需要遍历一个div，它有许多具有相同名称但是唯一ID的类，以便检索唯一ID和id的innerHTML。这是html

<div id="uploader">
<div class="row uploadDoc">
    <div class="col-sm-3">
        <div class="docErr">Please upload valid file</div>
        <!--error-->
        <div class="fileUpload btn btn-orange">
            <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon">
            <span class="upl" id="upload">Upload document</span>
            <input type="file" class="upload up" id="up" onchange="readURL(this);">
        </div>
        <!-- btn-orange -->
    </div>
    <!-- col-3 -->
    <div class="col-sm-8">
        <input type="text" class="form-control" name="" id="document_name" placeholder="Document Name">
    </div>
    <!--col-8-->
    <div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
    <!-- col-1 -->
</div>
<!--row-->


<div class="row uploadDoc">
    <div class="col-sm-3">
        <div class="docErr">Please upload valid file</div>
        <!--error-->
        <div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload3">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
    </div>
    <div class="col-sm-8"><input type="text" class="form-control" id="Doc3note" name="" placeholder="Note"></div>
    <div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
</div>




<div class="row uploadDoc">
    <div class="col-sm-3">
        <div class="docErr">Please upload valid file</div>
        <!--error-->
        <div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload4">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
    </div>
    <div class="col-sm-8"><input type="text" class="form-control" id="Doc4note" name="" placeholder="Note"></div>
    <div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
</div>




<div class="row uploadDoc">
    <div class="col-sm-3">
        <div class="docErr">Please upload valid file</div>
        <!--error-->
        <div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload5">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
    </div>
    <div class="col-sm-8"><input type="text" class="form-control" id="Doc5note" name="" placeholder="Note"></div>
    <div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
</div>




<div class="row uploadDoc">
    <div class="col-sm-3">
        <div class="docErr">Please upload valid file</div>
        <!--error-->
        <div class="fileUpload btn btn-orange"> <img src="https://image.flaticon.com/icons/svg/136/136549.svg" class="icon"><span class="upl" id="upload6">Upload document</span><input type="file" class="upload up" id="up" onchange="readURL(this);"></div>
    </div>
    <div class="col-sm-8"><input type="text" class="form-control" id="Doc6note" name="" placeholder="Note"></div>
    <div class="col-sm-1"><a class="btn-check"><i class="fa fa-times"></i></a></div>
</div>

我想为每个类“行uplaod”获取类“form-control”的id名称和innerhtml，所以我尝试了这个

 $('.row uploadDoc').each(function(){ 
  console.log(this)
  var targetdiv = this.getElementsByClassName("form-control")[0];
 console.log(targetdiv)
 })

和这个

$("uploadDoc").each(function(i) {

var targetdiv = getElementsByClassName("form-control")[0].innerHTML;
console.log(targetdiv)


});

但它们都不起作用，没有显示任何内容。如何获得每个类“form-control”的id和innerHTML？

Answer 1

如果要查找具有多个类名的元素，则不要在jQuery选择器中为它们添加空格。添加空格将使其将第二个类名称视为第一个类的子项。

在选择器中尝试.row.uploadDoc。

 $('.row.uploadDoc').each(function(){ 
  console.log(this)
  var targetdiv = this.getElementsByClassName("form-control")[0];
 console.log(targetdiv)
 })

您的第二个选择器也可以使用，您只是错过了. $(".uploadDoc")...。它不会要求uploadDoc元素也具有row类。

在你实现这一目标后，你可能会遇到另一个问题：

this.getElementsByClassName("form-control")[0].innerHTML;

该行不会使用元素的范围来查找form-control类。您可以通过

将该功能添加到jQuery选择器中

 $('.row.uploadDoc .form-control').each(function(){ 
    console.log($(this)[0]); //each form-control element that is a child of a .row.uploadDoc element
 });

这会在选择器中使用一个空格（我们上面的错误），这次是为了找到孩子。

迭代div来查找每个类的所有元素都不起作用

1 个答案: