2015-11-20 2 views
0

У меня есть следующий канал JSON, который я Перебери, как показано ниже, чтобы применить некоторые стили CSS:Jquery найти замену текста на корме JSon

 import({ 
      "Results":{ 
       "cars":[ 
       { 
        "__":1010, 
        "_":"<div class=\"clearfix\"><img class=\"feed\" src=\"http://example.com/toyota.jpg\"/> 
          <p>Some text....</p> 
          <p><strong>$1000</strong></p> 
         </div>" 
       }, 
       { 
        "__":2020, 
        "_":"<div class=\"clearfix\"><img class=\"feed\" src=\"http://example.com/nissan.jpg\"/> 
          <p>Some other text... </p> 
          <p><strong>$2000</strong></p> 
         </div>" 
       }, 

       ] 
      } 
     }); 


     for (var i = 0; i < data.Results["cars"].length; i++) { 
       $("#results").append("<p >" + data.Results["cars"][i]["_"] + "</p>"); 

       $(".clearfix").css({float: "left"; width: "120px"; text-align:"center"; padding: "10px 0"}); 
     } 

Как я могу Переберите каждый элемент и использовать JQuery, чтобы извлечь изображение (за исключением расширения) и замените текст первого тега p на него как и замените второй тег p на переключатель, который имеет то же значение, что и имя изображения.

ответ

0
// Iterating for every element in cars array 
[].forEach.call(data.Results.cars, function(inst){ 

    // Fetching the value of key _ 
    var _html = inst["_"]; 

    // Fetching the src of image by making string a jquery object 
    var _src = $(_html).find("img").attr("src"); 

    // Building html 
    var _h = '<div class="clearfix" style="float:left;width:120px;text-align:center;padding:10px 0">' 
       +'<img src="'+_src+'" >' 
       +'<p>'+_scr.split(".")[0]+'</p>' 
       +'<p><input type="radio" value="'+_scr.split(".")[0]+'" name="cartype"> </p>' 
      +'</div>'; 

    // Appending html to #results 
    $("#results").append(_h); 

}); 
+0

недействительными: '_scr.split ("") [0]' 'даст HTTP: // example.com/toyota' вместо' toyota' не будет? – adam78

0

Я попытался изменить предыдущий код, но я не обращался. Поэтому я отправляю этот ответ. Я думаю, что это сработает для вас.

[].forEach.call(data.Results.cars, function(inst){ 

    // Fetching the value of key _ 
    var _html = inst["_"]; 

    // Fetching the src of image by making string a jquery object 
    var _src = $(_html).find("img").attr("src"); 

    //Extracting the image's name 
    var _imagesName = _scr.split("/")[_scr.split("/").length-1].split(".")[0]; 
    // Building html 
    var _h = '<div class="clearfix" style="float:left;width:120px;text-align:center;padding:10px 0">' 
       +'<img src="'+_src+'" >' 
       +'<p>'+_imagesName+'</p>' 
       +'<p><input type="radio" value="'+imagesName'" name="cartype"> </p>' 
      +'</div>'; 

    // Appending html to #results 
    $("#results").append(_h); 

}); 
+0

[] .forEach.call не работает в IE8, поскольку он не поддерживает array.prototype.foreach? – adam78

Смежные вопросы