如何使append（）和appendChild（）成爲我想要的元素？

Question

我正在使用一個帶有六個圖像的過濾器的圖庫，該圖庫位於ul之內，並且每個li元素都具有使過濾器工作的兩個分類之一。這是結構：

<div id="productsGrid"> 
    <ul id="portfolio"> 
     <li class="men"> 
     <img src="images/grid-images/men/1.jpg" /><div class="caption">TEXT IMG 1</div> 
     </li> 
     <li class="woman"> 
     <img src="images/grid-images/woman/1.jpg" /><div class="caption">TEXT IMG 2</div> 
     </li> 
     <li class="men"> 
     <img src="images/grid-images/men/2.jpg" /><div class="caption">TEXT IMG 3</div> 
     </li> 
     <li class="woman"> 
     <img src="images/grid-images/woman/2.jpg" /><div class="caption">TEXT IMG 4</div> 
     </li> 
     <li class="men"> 
     <img src="images/grid-images/men/3.jpg" /><div class="caption">TEXT IMG 5</div> 
     </li> 
     <li class="woman"> 
     <img src="images/grid-images/woman/3.jpg" /><div class="caption">TEXT IMG 6</div> 
     </li> 
    </ul> 
</div> 

我已經在網站內存儲的兩種不同clases之間共有12個圖像文件，出於效率的考慮和設計我不想結構裏面要加載12張這樣做這就是爲什麼我打電話給每個人的前三個。我試圖用濾鏡的點擊功能的腳本實現的是，每個類的三個圖像的其餘部分都是用append()和appendChild()函數構建的。

$('#filter li').click(function() { 
     $('#filter .current').removeClass('current'); 
     $(this).parent().addClass('current'); 

     var filterVal = $(this).text().toLowerCase().replace(' ','-'); 
     var i = 4; 
     if(filterVal == 'all') { 
      $('#portfolio li.hidden').fadeIn('slow').removeClass('hidden'); 
     }else { 
      $('#portfolio li').each(function() { 
      if(!$(this).hasClass(filterVal)) { 
       $(this).remove(); 
       var linew = document.createElement("li"); 
       linew.className = filterVal; 
       imgNew = document.createElement("img"); 
       imgNew.src = 'images/grid-images/'+filterVal+'/'+i+'.jpg' 
       $('#portfolio').appendChild(linew); 
       linew.appendChild(imgNew); 
      } else { 

      } 
      }); 
     } 
     return false; 
     }); 

此代碼運行和控制檯沒有給出任何錯誤消息，但與該document.createElement創建的元件沒有示出。我希望每次點擊某個過濾器按鈕時都會刪除沒有點擊過的類的三個圖像，並顯示另外三個類。過濾條只有三個選項可以顯示被點擊的類的六個圖像。

<div id="topBar"> 
    <ul id="filter"> 
    <li class="current"><a href="#">All</a></li> 
    <li><a href="#">Men</a></li> 
    <li><a href="#">Woman</a></li> 
    </ul> 
</div> 

我不知道這段代碼是否正確完成，或者有另一種方法使這更容易，但即時通訊和jQuery的專家還沒有。我將不勝感激。

Answer 1

嘗試jQuery的方式：

if(!$(this).hasClass(filterVal)) { 
    $(this).remove(); 
    var linew = '<li class="'+filterVal+'"><img src="images/grid-images/'+filterVal+'/'+i+'.jpg"/></li>' 
    $('#portfolio').append(linew); 
} else { 
} 

Answer 2

你可以做這樣的：

  var $linew = $("<li />"); 
      $linew.attr("class", filterVal); 
      $imgNew = $("<img />"); 
      $imgNew.attr("src", 'images/grid-images/'+filterVal+'/'+i+'.jpg'); 
      $linew.append($imgNew); 
      $('#portfolio').append($linew); 

注意，你可以使用圖片作爲類的背景圖像.MAN和.woman，這會簡化你的js代碼。