Javascript jquery每个循环dom操作（JSON）

我对基于每个循环的函数有一个问题。我是初学者，我还没有找到其他话题的答案

我有这样的功能：

 function treeToCloud() {

        $(".treelist .treeimage").each(function(){   

            idCloudImage = $(".cloud-img img").attr("class");
            cloudImage = $(".cloud-img img");          

            if($(this).attr("id") == idCloudImage) {
                var treeImage = $(this).attr("src");
                $(cloudImage).attr("src", treeImage);
            }                        
        });                   

} 

<div class="treelist">
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/1.jpg" id="231" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/2.jpg" id="21" class="treeimage">
    </div>

    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/3.jpg" id="44" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/4.jpg" id="45" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/5.jpg" id="46" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/6.jpg" id="441" class="treeimage"></div>
    </div>
</div>

{
  "images": [
   {
     "id": "231",
     "uri": "images/1.jpg"
   },
   {

     "id": "21",
     "uri": "images/2.jpg"
   },
   {
     "id": "44",
     "uri": "images/3.jpg"
   },
   {
     "id": "45",
     "uri": "images/4.jpg"
   },
   {
     "id": "46",
     "uri": "images/5.jpg"
   },
   {
     "id": "441",
     "uri": "images/6.jpg"
   }
 ]
}

   {
     "iconId": "45"
   },
   {
     "iconId": "46"
   }

如下所示的HTML：

 function treeToCloud() {

        $(".treelist .treeimage").each(function(){   

            idCloudImage = $(".cloud-img img").attr("class");
            cloudImage = $(".cloud-img img");          

            if($(this).attr("id") == idCloudImage) {
                var treeImage = $(this).attr("src");
                $(cloudImage).attr("src", treeImage);
            }                        
        });                   

} 

<div class="treelist">
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/1.jpg" id="231" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/2.jpg" id="21" class="treeimage">
    </div>

    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/3.jpg" id="44" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/4.jpg" id="45" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/5.jpg" id="46" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/6.jpg" id="441" class="treeimage"></div>
    </div>
</div>

{
  "images": [
   {
     "id": "231",
     "uri": "images/1.jpg"
   },
   {

     "id": "21",
     "uri": "images/2.jpg"
   },
   {
     "id": "44",
     "uri": "images/3.jpg"
   },
   {
     "id": "45",
     "uri": "images/4.jpg"
   },
   {
     "id": "46",
     "uri": "images/5.jpg"
   },
   {
     "id": "441",
     "uri": "images/6.jpg"
   }
 ]
}

   {
     "iconId": "45"
   },
   {
     "iconId": "46"
   }

第二个JSON（部分）如下所示：

 function treeToCloud() {

        $(".treelist .treeimage").each(function(){   

            idCloudImage = $(".cloud-img img").attr("class");
            cloudImage = $(".cloud-img img");          

            if($(this).attr("id") == idCloudImage) {
                var treeImage = $(this).attr("src");
                $(cloudImage).attr("src", treeImage);
            }                        
        });                   

} 

<div class="treelist">
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/1.jpg" id="231" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/2.jpg" id="21" class="treeimage">
    </div>

    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/3.jpg" id="44" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/4.jpg" id="45" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/5.jpg" id="46" class="treeimage">
    </div>
    <div class="treeImgContainer">
        <img src="images/del-img2.png" class="deleteTreeImage">
        <img src="images/6.jpg" id="441" class="treeimage"></div>
    </div>
</div>

{
  "images": [
   {
     "id": "231",
     "uri": "images/1.jpg"
   },
   {

     "id": "21",
     "uri": "images/2.jpg"
   },
   {
     "id": "44",
     "uri": "images/3.jpg"
   },
   {
     "id": "45",
     "uri": "images/4.jpg"
   },
   {
     "id": "46",
     "uri": "images/5.jpg"
   },
   {
     "id": "441",
     "uri": "images/6.jpg"
   }
 ]
}

   {
     "iconId": "45"
   },
   {
     "iconId": "46"
   }

现在。我已经使用

.attr（“id”）

添加了JSON加载的所有id（工作正常）。JSON id位于

.treelist

类中，第二个JSON（“iconId”）位于

.cloud

类中的选择器中

现在我需要比较它们，如果“.treelist”中的id与“.cloud”类中的id相同，那么我想为

.cloud img

source like与.treelist中的id相同

我已经创建了函数，但它只更改了一个（第一个）元素并停止

我需要你的帮助，因为我不明白为什么它不能正常工作

---

谢谢，Fantazy

请尝试以下代码

function treeToCloud() {

    $(".treelist .treeimage").each(function(){   

        var currentTree = $(this);
        $(".cloud .cloud-img").each(function(){ 
            idCloudImage = $(this).find("img").attr("id");
            cloudImage = $(this).find("img");          

            if($(currentTree).attr("id") == idCloudImage) {
                var treeImage = $(currentTree).attr("src");
                $(cloudImage).attr("src", treeImage);
            }     
        });

    });                   

} 

  function treeToCloud() {
    $(".treelist .treeimage").each(function(){   
        var firstId = $(this).attr("id");
          $(".cloud-img img").each(function(){
             var secondId = $(this).attr("id");
             if(firstId  == secondId ) {
                $(this).attr("src", treeImage);
             }    
        });           
    });                   
}

---

谢谢！vijayP解决了我的问题！：）

Urvi-谢谢，但是你的代码不起作用

最终代码：

function treeToCloud() {

    $(".treelist .treeimage").each(function(){   

        var currentTree = $(this);
        $(".cloud .cloud-img").each(function(){ 
            idCloudImage = $(this).find("img").attr("class");
            cloudImage = $(this).find("img");          

            if($(currentTree).attr("id") == idCloudImage) {
                var treeImage = $(currentTree).attr("src");
                $(cloudImage).attr("src", treeImage);
            }     
        });

    });                   

} 

---

如果“第二部分HTML”与第一部分在同一文档中，则您的ID无效，因为它们必须是唯一的。