Jquery를 사용하여 각 루프에서 JSON 객체에서 가져온 div 안에 ul 당 6 개의 목록 항목을 표시합니다.

div에 중첩 된 6 개의 목록 항목을 ul 내에 표시 할 수없는 문제가 있습니다.Jquery를 사용하여 각 루프에서 JSON 객체에서 가져온 div 안에 ul 당 6 개의 목록 항목을 표시합니다.

$(function proName(){ 

$.getJSON("pros", function(data) { 

    /* Parse JSON objects */ 

    jJSON["pro_name"] = (function() { 
     //response = { 
      //values: [], 
      //count: 0 
     //}; 
     var $listReference; 
     var $listDiv; 
     var proNameLink; 
     $.each(data, function(i,item){ 
      if (item.pro_name != "undefined") { 
       if (i == 0 || i % 6 == 0) { 
       //response.count++; 
       //response.values[i] = item.pro_name; 
       var proName = item.pro_name; 
       var addProName = proName + ", "; 
       /* append li to ul block */ 
       proNameLink = $('<li><a class="pro-name-link'+i+'" href="#">'+proName+'</a></li>'); 
       $listDiv = $('<div id="scroll_controls" class="hasImage"></div>'); 
       $listReference = $('<ul id="pro-name-results"></ul>'); 
       $("#ajax-returned-content").append($listDiv); 
       $("#scroll_controls").append($listReference); 
       }; 
       $("#pro-name-results").append(proNameLink); 
       /* disable link after click */ 
       proNameLink.bind("click", function() { 
        $('.pro-name-link'+i+'').removeAttr('href'); 
        $('.pro-name-link'+i+'').css('color', '#ffffff'); 
        $('.added-search-terms').append(addProName); 
        $('.pro-name-link'+i+'').unbind('click'); 
       }); 
      }; 
     }); 
     //return response; 
    })(); 

    /* Return a number of values for a given object */ 

    //alert(jJSON.getValues("pro_name",null)); 
}); 
}); 

var jJSON = { 
getValues: function(obj,num) { 
    return jJSON[obj]["values"].slice(0,((num == null) ? jJSON[obj]["values"].length : num)); 
}, 
getCount: function(obj) { 
    return jJSON[obj]["count"]; 
} 
};

그리고 내 HTML :

<body> 
    <div id="wn"> 
     <div id="lyr" class="content"><span class="search-terms-title">Search Terms: <span class="added-search-terms"></span></span></div> 
     </div> 
     <div id="ajax-returned-content" class="ajax-search-content"> 

    </div> 
</body>

내가 기본적으로하고 싶은 것은 JSON 객체를 통해 루프는 각각의 새로 생성 된 UL에 대한 여섯 개 목록 항목을 넣어 다음은 내가 지금까지 무엇을 가지고 각 UL 블록이 6 개의 목록 항목을 가지며 새 DIV 내에 중첩 된 각 블록이 서로 옆에 플로트되도록 새로 만든 DIV 안에 해당 UL을 배치합니다. 최종 결과는 다음과 같이 보일 것입니다 : 등등

<div id="ajax-returned-content" class="ajax-search-content"> 
    <div id="scroll_controls" class="hasImage"> 
     <ul id="pro-name-results"> 
      <li><a href="#" class="pro-name-link1">Jerry</a></li> 
      <li><a href="#" class="pro-name-link2">Henry</a></li> 
      <li><a href="#" class="pro-name-link3">Dolly</a></li> 
      <li><a href="#" class="pro-name-link4">Stephanie</a></li> 
      <li><a href="#" class="pro-name-link5">James</a></li> 
      <li><a href="#" class="pro-name-link6">Anderson</a></li> 
     </ul> 
    </div> 
    <div id="scroll_controls" class="hasImage"> 
     <ul id="pro-name-results"> 
      <li><a href="#" class="pro-name-link7">Andy</a></li> 
      <li><a href="#" class="pro-name-link8">Peter</a></li> 
      <li><a href="#" class="pro-name-link9">Sam</a></li> 
      <li><a href="#" class="pro-name-link10">Tony</a></li> 
      <li><a href="#" class="pro-name-link11">Ken</a></li> 
      <li><a href="#" class="pro-name-link12">Jun</a></li> 
     </ul> 
    </div> 
</div>

와 .... 모든

출처

2009-11-02 loganlee

은 $ .each 수 있음 (data.values, 기능 (전, 항목을 ... 또는 내가 응답 형식을 오해 –

내가하지 이후 장해야 해요 나는 jquery 세계에 다소 새로운 ...하지만 $ (각각 JSON 객체에서 가져온 모든 것을 반복하여 data, function (i, item)을 반복 할 것이라고 생각했다.) – loganlee

지금 당장은 각 루프 함수 모든 6 개 항목 중 첫 번째 항목 만 반환합니다 (여섯 개 항목 모두 포함하지는 않습니다). – loganlee

먼저, 당신이 당신의 코드를 정리하고 불필요한 물건을 제거하는 것이 좋습니다, 당신은 그것을 만들거야 읽고 이해하기 쉽고 바라기를 바랍니다.

내가 당신의 문제는 당신이 처리하는 방식에서 오는 생각하여 블록 if (i == 0 || i % 6 == 0)은 (BTW, if (i % 6 == 0)도 작동) 경우 : proNameLink 변수 만 발견 된 모든 (6)의 첫 번째 항목을 얻을 이유를 설명이 블록에 가득합니다. ? 난 당신이 다음을 수행하고 싶다고 생각?)

if (i % 6 == 0) 
{ 
    // Create a new list for 6 next items 
    $listReference = $('<ul></ul>'); 
    // Create a container div for your list 
    var containerDiv = $('<div class="hasImage"></div>') 
    // append the div and list to the page DOM 
    div.append($listReference); 
    $('#ajax-returned-content').append(div); 
    // Note that if you want to set an ID to the ul and the div, you have to 
    // make it UNIQUE. Your code creates multiple DOM elements with the same ID. 
    // A kitten dies every time you do that. 
} 
// Create a list item, OUTSIDE of the if block 
var proName = item.pro_name; 
var proNameLink = $('<li><a class="pro-name-link'+i+'" href="#">'+proName+'</a></li>'); 
// Append list item to current list 
$listReference.append(proNameLink);

출처

2009-11-02 09:05:27 ybo

내가 잘못 생각한 부분은 ... if 블록 내의 proNameLink입니다.하지만 솔루션을 사용해 보았지만 이제는 결과가 나오지 않습니다. 모두 ... 내가 뭔가 빠졌어? – loganlee

Jquery를 사용하여 각 루프에서 JSON 객체에서 가져온 div 안에 ul 당 6 개의 목록 항목을 표시합니다.

답변

관련 문제