jquery每次循环dom操作(JSON)

jquery each loop dom operations (JSON)

本文关键字：JSON 操作 dom 循环 jquery 更新时间：2023-09-26

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

我有这样的函数:

 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>

第二部分HTML:

<div class="say-item cloud">
    <div class="cloud-img">
        <img src="images/addci.jpg" class="45">
    </div>
        <div class="cloud-img">
        <img src="images/addci.jpg" class="46">
    </div>
</div>

JSON:

{
  "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"
   }
 ]
}

第二个JSON(部分)如下:

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

。我添加了所有id的JSON加载使用.attr("id")(正常工作)。JSON id在.treelist类中，第二个JSON ("iconId")在.cloud类中进入选择器。

现在我需要比较它们和if id in "。"树列表"与"id"相同。cloud"类我想给.cloud img源，就像在相同的id。treelist。

我已经创建了一个函数，但是它只改变了一个(第一个)元素并停止了。

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

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