jquery каждый цикл dom операций (JSON)

Question

У меня есть проблема с функцией, основанной на каждом цикле. Я новичок, и я не нахожу свой ответ по другим темам.

У меня есть функция, как это:

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

} 

HTML как это:

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

И теперь. Я добавляю все идентификаторы с нагрузкой JSON, используя .attr("id") (работает правильно). JSON id находится в .treelist классе и второй JSON («iconId») в селекторах в классе .cloud.

Теперь мне нужно их сравнить, и если id в «.treelist» совпадает с id в классе «.cloud», я хочу дать для .cloud img источник, похожий на тот же идентификатор в .treelist.

Я создал функцию, но она меняет только один (первый) элемент и останавливается.

Мне нужна ваша помощь с этим, потому что я не понимаю, почему он не работает правильно

Спасибо, Фэнтэзи

Answer 1

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

    });     

} 

Answer 2

Пожалуйста, попробуйте следующий код

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

Answer 3

Спасибо! 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); 
      }  
     }); 

    });     

}