다른 테이블에서 값을 가져오고 jquery에 추가

Question

제품 이름과 제품 이미지 경로의 두 테이블을 사용하고 있습니다 ... 이미지 경로를 잡고 동적으로 이미지를 추가 할 수 있습니다. 그것은 잘 작동합니다.

문제는 그 이미지 위에 에 DIV 클래스는 호버에 이미지의 제목을 추가 할 때, 나는 jQuery의 각 기능을 사용하여 호버 DIV에 제목을 변경, 제목이 를 연결된보다는 추가됩니다 있다는 것입니다 특정 이미지로. 여기

테이블 경로에서 이미지를 추가하려면 코드 ..

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#mainContentPlaceholder_productPathGridView').hide(); //Hides ImagePath Gridview 

     var arr = []; //Creates an Array Path Arr 
     $("#mainContentPlaceholder_productPathGridView td").each(function() { //Loops through GridView Td (Table Columns) 
      arr.push($(this).text()); 
     }); 

     // Starts adding Images to the Gallery 
     $.each(arr, function (index, imageLocation) { 
      $(".megafolio-container").append('<div class="mega-entry jeans cat-all" data-src="' + imageLocation + '"' + 'data-width="395" data-height="507"><div class="mega-hover"><div class="mega-hovertitle"><h2 class="productNameTitle"></h2><a class="shopButton" href="itemDetails.aspx">Details</a></div></div></div>'); //Apended New Values 
     }); 

    }); 
</script> 

입니다 그리고 여기에 ID를 추가하는 내 추가 된 코드입니다

<!-- Getting Product Names--> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#mainContentPlaceholder_productNameGridView').hide(); //Hides ImagePath Gridview 

     var arr2 = []; //Creates an Array Path Arr 
     $("#mainContentPlaceholder_productNameGridView td").each(function() { //Loops through GridView Td (Table Columns) 
      arr2.push($(this).text()); 
     }); 

     // Starts adding Images to the Gallery 
     $.each(arr2, function (index, productname) { 
     // alert(productname); 
      $(".productNameTitle").text(productname); //Apended New Name 
     }); 
     }); 
</script> 

이제 문제는 IDS가 존재합니다 모든 div에 연결된 ...

Answer 1

만약 내가 틀리면 .. 왜 두 개가 아닌 하나의 루프를 사용하지 마십시오 .. 당신은 teo 다른 배열 arr, arr2를 만들고 철저히 반복합니다 ... 동일한 것을 표시하기 위해 텍스트 ..

이

$("#mainContentPlaceholder_productNameGridView td").each(function() { //Loops through GridView Td (Table Columns) 
     $(".megafolio-container").append('<div class="mega-entry jeans cat-all" data-src="' + $(this).text() + '"' + 'data-width="395" data-height="507"><div class="mega-hover"><div class="mega-hovertitle"><h2 class="productNameTitle"></h2><a class="shopButton" href="itemDetails.aspx">Details</a></div></div></div>'); //Apended New Values 
     $(".productNameTitle").text($(this).text()); 
    });