숨겨진 "prepended"li 요소가있는 목록

목록 ("ul")을 만들려고합니다. 나중에 jquery로 값을 추가하고 .prepend() 함수를 사용합니다. 나는이 모든 새로운 가치들을 만들고, div 에서처럼 숨겨지기를 원합니다. 그러나 나중에 그것들을 보여줄 것이지만, 나는 그것들을 추가 할 것입니다, 그들은 숨겨져 야합니다. 그런 식으로 할 수있는 방법이 있습니까? enter image description here 숨겨진 "prepended"li 요소가있는 목록

나는 내가 JQuery와 함께 5, 6 리 요소를 추가 같은 ID를하고 싶어하고 그 "숨겨진 영역"에 있어야하고, "가시 영역의 목록 그래서 뭐, 내 문제를 보여주기 위해 사진을 만들어 "변하지 않을 것이다. 지금까지 그 목록을 만들었지 만 가시 영역에있는 새로운 요소를 추가하고 가시 영역에 대한 li 요소 순서는 "6, 5, 1, 2"와 같이 나타납니다.

EDIT.

@mboldt 제안으로 내 문제를 해결하기가 힘들었지 만 나에게 도움이되지 않았거나 잘못 처리했습니다. 대신에 "숨겨진"위치에,

$(".item-list-ul").prepend("<li><div class='item'>jquery</div></li>")

새로운 리튬 요소 목록에서 간다 : 나는 JQuery와 함께 새로운 요소를 앞에 추가하려고 할 때

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <style type="text/css"> 
    .item-list-inner { 
    float:left; 
    width: 600px; 
    overflow: hidden; 

    border:2px solid black; 
    } 

    .item-list-ul { 
     position:relative; 
     list-style-type: none; 
     margin: 0px; 
     padding: 0px; 
     width:9999px;  
     height:100px; 
    } 

    .item-list-ul li { 
     display: inline-block; 
     *display: inline; /*IE7*/ 
     *zoom: 1;   /*IE7*/ 
     float: left; 
    } 

    .item{ 
     width:80px; 
     height:80px; 
     border:1px solid red; 
     margin:7px; 

    } 
    </style> 
</head> 
<body> 
<p></p> 
<p></p> 
<p></p> 
<p></p> 
    <div class="item-list-inner"> 
     <ul class="item-list-ul"> 
       <li> 
        <div class="item">1</div> 
       </li> 
       <li> 
        <div class="item">2</div> 
       </li> 
       <li> 
        <div class="item">3</div> 
       </li> 
       <li> 
        <div class="item">4</div> 
       </li> 
       <li> 
        <div class="item">5</div> 
       </li> 
       <li> 
        <div class="item">6</div> 
       </li> 
     </ul> 

</div> 
</div> 
</body> 
</html>

그러나 나의 코드가 첫 번째 행입니다 결과 나는 새로운 요소가 그 보이지 않는 (숨겨진 영역)에 들어가서 내가 목록을 회전시킬 때까지 보여지지 않을 것처럼, 얻고 싶다. 두 번째 행은 지금 내 코드로 얻은 결과입니다. 보시다시피 저는 새로운 li 요소를 앞에 둡니다. 목록 앞에 있지만 가시 영역에 들어가고 다른 li 요소를 이동시킵니다.

enter image description here

출처

2014-09-02 mat1c

지금까지 시도한 것을 보여주십시오. 온라인 데모도 좋습니다. –

숨겨진 지역이란 무엇입니까? 'display : none' ??? 또는 '왼쪽 : -1000px' 뷰 밖으로 –

그런 경우 목록에 새 항목을 추가하면 전체 목록 80px (목록 항목 하나의 너비)를 왼쪽으로 이동하여 앞에 추가 된 항목이 보이지 않는 영역으로 이동하는지 확인합니다. – mboldt

당신은 그들에게 클래스를 추가 할 수 있습니다 ".addClass를 ('숨겨진')"및 CSS 파일 :; .removeClass (' ".hidden {디스플레이 없음}

나중에 당신은 단지 필요") '숨겨진 "를 표시합니다.

출처

2014-09-02 10:00:19 danielg44k

보이는 영역의 요소를 '6, 5, 1, 2'로 정렬합니까? 나는 그렇게 생각하지 않는다. 이 질문은 너무 광범위합니다. –

그는 그 새로운 요소가리스트 상단에 있기를 원합니다. – danielg44k

당신이 목록 항목을 만들 경우 목록에 추가하기 전에 sipmly이

var item = $("<li>hidden item</li>"); 
$(item).hide(); 
$("#list").prepend(item);

체크 아웃 t처럼 jQuery를 방법을 통해 숨길 수 그의 jsfiddle, 그것은 단지 3 개의 목록 항목을 보여 주지만 firebug로 소스 코드를 보면 다른 숨겨진 목록 항목이 추가 된 것을 볼 수 있습니다.

그러나 슬라이더와 같은 것을 구현하려는 경우 오버 플로우 속성은 찾고있는 것일 수 있습니다 (주어진 정보로는 알기 힘듭니다).

이제 질문을 업데이트하고 내가 지금 당신은 내가 다른 솔루션으로 새로운 jsfiddle을 만들어 뭘 하려는지 알고 생각 EDIT. 그것을 확인해보고 코드가 도움이되는지 확인하십시오. jsfiddle에는 목록을 오른쪽으로 스크롤하는 버튼과 목록 왼쪽의 "보이지 않는 영역"에 항목을 추가하는 버튼이 있습니다. 참고 : 실제로는 깨끗하지 않습니다. 즉, 스크롤해도 테두리가 보이지만 사실은 숨겨져 있어야하지만 아이디어를 충분히 보여줄 수있을 것입니다.

출처

2014-09-02 10:08:10 mboldt

거의 슬라이더와 같은 것을 만들기를 목표로합니다. 요소는 왼쪽에서 오른쪽으로 양식과 같이 가고, 요소는 왼쪽에서 숨겨진 영역에 도달 한 후 목록에서 제거됩니다. 거기에 회전 목마처럼 그들은 회전하지 않습니다.) – mat1c

나는 한 번 비슷한 것을했고 가시적 인 영역 (빨간 선들 사이)은 고정 너비와 오버 플로우가있는 div가 될 것입니다 : 숨김. ul- 요소는 상대적으로 배치되어야하며 javascript를 통해 왼쪽 또는 오른쪽으로 이동하여 보이는 영역 안팎으로 목록 항목을 슬라이드 할 수 있습니다. – mboldt

나는 당신이 제안한 것과 같은 것을하려고 시도했지만 지금까지 그것은 나를 위해 잘못된 길로 간다. 결과가있는 첫 번째 게시물을 수정했습니다. – mat1c

숨겨진 "prepended"li 요소가있는 목록

답변

관련 문제