중첩 된 주문 목록
-
13-09-2019 - |
문제
다음과 같이 서브 시템 번호가있는 중첩 목록이 필요합니다.
1. Item 1
1.1 - Subitem 1
1.2 - Subitem 2
1.3 - Subitem 3
1.4 - Subitem 4
1.5 - Subitem 5
2. Item 2
2.1 - Subitem 1
2.2 - Subitem 2
2.3 - Subitem 3
2.4 - Subitem 4
2.5 - Subitem 5
글쎄, 나는 순수한 HTML로 그것을 달성 할 수 없다는 것을 안다. 이와 같은 것을 사용하고 Subrist를 자동으로 번호를 매기는 것이 좋습니다.
<ol>
<li>
Item 1
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
<li>Subitem 5</li>
</ol>
</li>
<li>
Item 2
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
<li>Subitem 3</li>
<li>Subitem 4</li>
<li>Subitem 5</li>
</ol>
</li>
</ol>
JavaScript 또는 JQuery 등을 사용하여이를위한 솔루션이 있습니까?
해결책
jQuery와 함께 크로스 브라우저를하고 싶다면 :
$("ol#list ol").each(function(i, el){
$(this).children().each(function(ci,cel){
$(this).prepend('<span class="pseudo-num">' + [i + 1, ci + 1].join('.') + ' </span>');
});
}).addClass('pseudo-processed');
그리고 당신의 CSS에서 :
ol .pseudo-num { display: none }
ol.pseudo-processed { list-style: none; padding-left: 0 }
ol.pseudo-processed .pseudo-num { display: inline; font-weight: bold }
이것은 한 레벨만을위한 것입니다. 여러 레벨에 대한 재귀 함수를 만들기 위해 코드를 변경할 수 있습니다.
이것은 페이지를 점차적으로 향상시키기위한 설정입니다. JavaScript가 없으면 정상 중첩 번호로 떨어질 것입니다.
업데이트: 감사합니다 @검보 작업,이 코드를 재귀 플러그인으로 재 작업했습니다. 이전 예제에서와 동일한 CSS를 사용하지만 이제는 깊이를 지원하는 "Full Fledged"jQuery 플러그인입니다.
$.fn.outline = function(options, counters){
var options = $.extend({}, $.fn.outline.defaults, options),
counters = counters || [];
this.each(function(){
$(this).children('li').each(function(i){
var ct = counters.concat([i + 1]);
if(counters.length){
$('<span></span>')
.addClass(options.numberClass)
.text(ct.join('.') + ' ')
.prependTo(this);
}
$(this).children('ol').outline(options, ct);
})
});
if(!counters.length) this.addClass(options.processedClass)
}
$.fn.outline.defaults = {
numberClass: 'pseudo-num',
processedClass: 'pseudo-processed'
}
그런 다음 특정에서 호출 할 수 있습니다 #id
:
$("#list").outline();
또는 @gumbo의 멋진 선택기를 사용하여 모두에게 적용하십시오. ol
한 페이지의 태그 :
$("ol:not(li > ol)").outline();
또한 기본값을 전 세계적으로 또는 개별적으로 무시할 수 있습니다.
$.fn.outline.defaults.processedClass = 'ol-ready';
// or
$("#list").outline({processedClass: 'ol-ready'});
다른 팁
CSS를 사용하여 다음을 수행 할 수 있습니다.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". - "; counter-increment: item }
LI LI:before { content: counters(item, ".") " - "; counter-increment: item }
그러나 지원이 필요합니다 counter
그리고 counters
.
편집하다다음은 dcneiner와 유사한 jQuery 접근법이 있지만 깊이에는 제한이 없습니다.
function foo($ol, counters) {
counters = counters || [];
$ol.each(function(i) {
var $this = $(this);
$this.children("li").each(function(i) {
var $this = $(this);
$this.prepend(counters.concat([i+1]).join(".") + " ");
$this.children("ol").each(function(j) {
foo($(this), counters.concat([i+1]));
});
});
});
}
foo($("ol:not(li > ol)"));
JS 나 JQuery는 아니지만 CSS :
<STYLE type="text/css">
UL, OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>
제휴하지 않습니다 StackOverflow