如何選擇一個包含變量的選擇器？ （Javascript，jQuery，DOM）

Question

我一直在爲此掙扎好幾天，我有一個函數接受一個對象並循環遍歷它，創建顯示列的行（bootstrap），所以我使用jQuery以便從對象本身中選擇一個具有值的ID並附加到該ID上，但出於某種原因，包含該變量的ID選擇器不會被看到，也不會附加到帶有ID的div上？

function add_to_page(product) { 
//this is the main row that will contain the columns 
var rows = $('<div class="row" ></div>'); 
for (var category in products) { 
    for (var i = 0; i < products[category].length; i++) { 
     rows.append($("<div id='" +products[category][i].id +"'></div>").html($('<img>').attr('src', products[category][i].img))); 
     //the below code is never executed it only creates the image and stops appending after that 
     $('#' + products[category][i].id).append($('<div class=name>').text(products[category][i].name)); 
     $('#' + products[category][i].id).append($('<div class=category>').text(products[category][i].category)); 
     $('#' + products[category][i].id).append($('<div class=price>').text('Price: ' + products[category][i].price + 'L.E')); 
     $('#' + products[category][i].id).addClass('col-md-3'); 
     //the below code is to create a new row after filling each row with 4 display columns 
     if (i % 3 == 0 && i != 0) { 
     $('#content').append(rows.clone(true)); 
     rows = $('<div class="row"></div>'); 
     } 
    } 
    } 
} 

這裏是我試圖追加到HTML：

<div class="container full-width"> 
    <div id="content"></div> 
</div> 

我正在正常調用該函數，在控制檯中沒有錯誤

add_to_page(products); 

Answer 1

追加所有動態HTML一個存儲在變量中的元素然後將該變量附加到DOM。該選擇器不會工作bc您嘗試訪問的元素還不存在。

做這樣的事情：

var el = $('<div' + id + '></div>') 
el.append(your row constructed html) 

然後在第2 for循環的末尾添加，爲您的行。

編輯

for(.... row iteration code) { 
    var el = $('<div' + id + '></div>'); 
    el.append('your image goes here'); 
    el.append('name element'); 
    ... 
    rows.append(el); 
} 

Answer 2

您需要重新構建代碼..你能找到該元素第一 rows.append（$（ 「」） 改用products.category [I] .ID然後使用jQuery wrap（）將列包裝成行

Answer 3

您不能使用選擇器來查找尚未添加到文檔中的元素（除非使用第二個參數$(selector, context)）。但出於您的目的，您可以使用這個事實：append方法可以接受多個參數。

與其他一些修改，使你的代碼更jQuery的一樣，你得到這樣的：

function add_to_page(products) { 
 
    //this is the main row that will contain the columns 
 
    var rows = $('<div>').addClass("row"); 
 
    for (var category in products) { 
 
     for (var item of products[category]) { 
 
      rows.append(
 
       $("<div>").attr("id", item.id).addClass('col-md-3').append(
 
        $('<img>').attr('src', item.img), 
 
        $('<div>').addClass('name').text(item.name), 
 
        $('<div>').addClass('category').text(item.category), 
 
        $('<div>').addClass('price').text('Price: ' + item.price + 'L.E') 
 
       ) 
 
      ); 
 
      //the below code is to create a new row after filling each row with 3 display columns 
 
      if (rows.children().length >= 3) { 
 
       $('#content').append(rows); 
 
       rows = $('<div>').addClass("row"); 
 
      } 
 
     } 
 
    } 
 
    // Flush any rows that were not yet added: 
 
    if (rows.children().length) { 
 
     $('#content').append(rows); 
 
    } 
 
} 
 

 
// Sample data 
 
var products = { 
 
    fruit: [{ 
 
     name: 'apple', 
 
     price: 2.20, 
 
     img: "https://www.colourbox.com/preview/7011130-apples-on-table-and-knife.jpg", 
 
     category: 'fruit' 
 
    }, { 
 
     name: 'kiwi', 
 
     price: 3.10, 
 
     img: "https://www.colourbox.com/preview/10157893-kiwi-fruit.jpg", 
 
     category: 'fruit' 
 
    }, { 
 
     name: 'banana', 
 
     price: 1.50, 
 
     img: "https://www.colourbox.com/preview/6294218-banana.jpg", 
 
     category: 'fruit' 
 
    }], 
 
    vegetables: [{ 
 
     name: 'lettuce', 
 
     price: 0.90, 
 
     img: "https://www.colourbox.com/preview/2347661-fresh-salad-leaves-assortment-in-a-basket.jpg", 
 
     category: 'vegetables' 
 
    }, { 
 
     name: 'radish', 
 
     price: 1.60, 
 
     img: "https://www.colourbox.com/preview/3602479-red-radish.jpg", 
 
     category: 'vegetables' 
 
    }] 
 
}; 
 

 
add_to_page(products);

.col-md-3 { display: inline-block; margin: 5px } 
 
img { max-width: 100px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container full-width"> 
 
    <div id="content"></div> 
 
</div>

Answer 4

使用@trincot's superior answer，但請注意，你也可以通過一個完整的HTML串入jQuery的.html()。 E.G：

function add_to_page(products) { 
 
    var $content = $("#content"), 
 
     cols=3, //number of columns 
 
     $row, 
 
     i=0; 
 
    
 
for (var category in products) { 
 
    for (var item of products[category]) { 
 
     if(i%cols == 0){//add a new row 
 
     $row = $("<div class='row'></div>"); 
 
     $content.append($row); 
 
     } 
 
     //add the item to the row 
 
     $row.append($("<div class='col-md-"+cols+"' id='" +item.id +"'><img src='"+item.img+"' /><div class=name>"+item.name+"</div><div class=category>"+item.category+"</div><div class=price>Price: "+item.price+"L.E</div>")); 
 
     i++; 
 
    } 
 
    } 
 
} 
 

 

 
var products = { 
 
    "jam" : [ 
 
      {"id":1,"name":"strawberry", "category":"jam", "price":123, "img":"pic.gif"}, 
 
      {"id":2,"name":"rasberry", "category":"jam", "price":456, "img":"pic.gif"}, 
 
      {"id":3,"name":"madberry", "category":"jam", "price":123, "img":"pic.gif"}, 
 
      {"id":4,"name":"sadberry", "category":"jam", "price":456, "img":"pic.gif"} 
 
      ], 
 
    "bees" : [ 
 
      {"id":4,"name":"baz", "category":"bee", "price":1, "img":"pic.gif"}, 
 
      {"id":5,"name":"buzz", "category":"bee", "price":2, "img":"pic.gif"} 
 
      ] 
 
    }; 
 
    
 
//console.log(products); 
 
add_to_page(products);

.row {display:block; border:1px solid blue;} 
 
.row div[id] {display:inline-block; border:1px solid red; width:100px; margin:5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container full-width"> 
 
    <div id="content"></div> 
 
</div>