부트 스트랩 목록을 반복 할 수 있습니까?

가변 개수의 요소가 포함 된 Twitter Bootstrap 목록이 있습니다 (실제로는 draggable 및 droppable 요소가있는 두 개의 목록이 Sortable.js).부트 스트랩 목록을 반복 할 수 있습니까?

어느 시점에서 각 목록 항목에서 data atribute을 얻으려면 해당 목록 요소를 반복하고 싶습니다. 이것은 내 목록이 HTML에서 어떻게 보이는지를 보여줍니다.

 <div class="panel-body"> 
      <ul id="main_list" class="list-group"> 
       <li id="opt1" href="#" class="list-group-item" data_value="1">Opt 1</li> 
       <li id="opt2" href="#" class="list-group-item" data_value="2">Opt 2</li> 
       <li id="opt3" href="#" class="list-group-item" data_value="3">Opt 3</li> 
      </ul> 
     </div>

실현할 수 있습니까? 아니면 목표 지향적입니까? 그렇지 않다면 어떻게해야이 과제를 다시 생각해야합니까?

출처

2015-01-12 Roman Rdgz

음 ...'.attributes' 또는'.getAttribute ('data-attribute-name')'을 사용하여 모든 속성을 반환 할 수 있으며, 그렇게 할 수 있습니다. '.onEnd','onAdd' 등; 함수를 사용하여 원하는 것을 반환하십시오. – klauskpm

"부트 스트랩 목록"이란 무엇입니까? Twitter 부트 스트랩을 의미하는 경우 적절하게 이름을 지정하고 사용한 컨텐츠 요소 유형을 가리 키십시오. – feeela

@feeela Twitter 부트 스트랩보다 다른 부트 스트랩이 있는지 몰랐는데 ... 내 HTML 코드를 포함하도록 업데이트했습니다. list –

당신은

<li id="opt3" href="#" class="list-group-item" data-value="3">Opt 3</li>

처럼 특정 정보를 넣어 얻을 것을 쉽게 jQuery로 할 수 있습니다

$("#opt3").data("value")

그러나 그렇게 할 수있는 의미 론적 방법은 함께 "-"대신 "_"의.

이 목록을 반복하려면 수행 할 수 있습니다

$("#main_list li").each(function(){ 
 
    var itemValue = $(this).data('id'); 
 
    var itemName = $(this).data('name'); 
 
    alert(itemValue+" - " +itemName); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="panel-body"> 
 
      <ul id="main_list" class="list-group"> 
 
       <li id="opt1" href="#" class="list-group-item" data-name="customname1" data-id="1">Opt 1</li> 
 
       <li id="opt2" href="#" class="list-group-item" data-name="customname2" data-id="2">Opt 2</li> 
 
      </ul> 
 
     </div>

출처

2015-01-12 12:53:09 Thiago

티아고의 대답은 완전히 유효하며, jQuery를 이미 다음을 사용하는 경우는 허용 대답해야합니다.

var elements = document.getElementById('main_list').children, 
    maxElements = elements.length, 
    counter = 0, 
    tmpAttribute; 

for (; counter < maxElements; counter++) { 
    tmpAttribute = elements[counter].getAttribute('data_value'); 
    // whatever you need to do with tmpAttribute 
}

당신은 함수에 그것을 포장하고, 예를 들어 클릭에 그것을 호출 할 수 있습니다하지만 여기의 이익을 위해 일반 JS의 솔루션입니다. http://jsfiddle.net/Lzcbzq7x/1/

출처

2015-01-12 13:08:02 Ben

부트 스트랩 목록을 반복 할 수 있습니까?

답변

관련 문제