如何使用一個爲每個或迭代通過div？

Question

我構建了我自己的jQuery版本的標籤內容系統。基本的標記如下。

<div class="row" id="toShow> 
    <div> 
     content 
    </div> 
    <div> 
     content 
    </div> 
    <div> 
     content 
    </div> 
</div> 

資產淨值變爲另一行

<div class="row" id="Links> 
    <ul> 
     <li>link</li><li>link</li><li>link</li><li>link</li> 
    </ul> 
</div> 

這裏是運行選項卡

$('.toShow .dslc-modules-area:not(:first)').addClass("hide"); 

$(".links li").click(function() { 
    $(".links li").siblings().removeClass('active'); 
    $(this).toggleClass('active'); 
    var identify=$(this).index(); 
    $(".toShow .dslc-modules-area:not(:eq(identify))").addClass("hide"); 
    $(".toShow .dslc-modules-area").eq([identify]).removeClass('hide').toggleClass("showme"); 
    $('html,body').animate({scrollTop: $(".toShow").offset().top + 0}, 800); 

的JS，如果我對第一一二手風琴作品和我假設它是一個迭代/每個問題？我的問題是，無需鏈接1，鏈接2等是否有辦法讓代碼適用於每一組手風琴？也就是說，對於#toShow和#Links的每一組運行此代碼？

Answer 1

是的，有是一個jQuery每個功能（）：

查看文檔中的條目： http://api.jquery.com/jquery.each/

Answer 2

這裏的主要癥結是，你需要一種方法的標籤和內容旨在區分對於標籤集1，對於標籤集2，對其中一個點擊不會影響另一個集。例如，$('.links li')將匹配來自兩個集合的所有鏈接，因此除非限制選擇器，否則最終會在選項卡集之間產生串擾。

很多方法可以解決這個問題。在這裏，我包裹每個標籤集合中的元素用單個元素包裹內，並修改代碼單獨作用於每個包裝中的內容：

/* Init each tabset separately, using '.find' to limit the subsequent 
 
    selector to act only within that node: */ 
 
$('.tabset').find('.toShow div:not(:first)').addClass("hide"); 
 
$('.tabset').find('.links li:first').addClass("active"); 
 

 
/* Now attach the event handlers to the links, again separately 
 
    for each tabset: */ 
 
$('.tabset').each(function() { 
 
    var tabset = $(this); // so we don't collide with the 'this' inside the click handler below 
 
    tabset.find(".links li").click(function() { 
 
    tabset.find(".links li").removeClass('active'); 
 
    $(this).addClass("active"); 
 
    var identify = $(this).index(); 
 
    tabset.find(".toShow div:not(:eq(identify))").addClass("hide"); 
 
    tabset.find(".toShow div").eq([identify]).removeClass('hide'); 
 
    }); 
 
});

.hide { 
 
    display: none; 
 
} 
 
.active { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="tabset"> 
 
    <div class="row links"> 
 
     <ul> 
 
     <li>link 1</li><li>link 2</li><li>link 3</li> 
 
     </ul> 
 
    </div> 
 
    <div class="row toShow"> 
 
     <div>content 1</div><div>content 2</div><div>content 3</div> 
 
    </div> 
 
</span> 
 

 
<span class="tabset"> 
 
    <div class="row links"> 
 
     <ul> 
 
     <li>link 1</li><li>link 2</li><li>link 3</li> 
 
     </ul> 
 
    </div> 
 
    <div class="row toShow"> 
 
     <div>content 1</div><div>content 2</div><div>content 3</div> 
 
    </div> 
 
</span>

（這可以通過合併來提高委託點擊事件的標籤集節點本身，即$('.tabset').on('click','.links li', function() {...});而不是個別事件給每個li，但是這不是你問的問題。）

如果你的DOM結構不管出於什麼原因不允許加入該包裝節點，喲您可以改爲依賴於文檔順序（例如，限制每個.links行僅對下一個兄弟行.toShow行起作用），或者向每個對添加一個數據屬性（或類或其他）（限制每個.links[data-tabset="foo"]僅對.toShow物品也有data-tabset="foo"）。下面是僅使用文檔順序一個例子：

/* Init is basically the same as the previous snippet: */ 
 
$('.toShow').find('div:not(:first)').addClass("hide"); 
 
$('.links').find('li:first').addClass("active"); 
 

 
$('.links li').click(function() { 
 
    /* But here we need to traverse the DOM to find the correct sets 
 
    of links and content blocks to act on. This looks simpler, but 
 
    is more fragile to document order changes, so I'd really recommend 
 
    the other approach, or an explicit identifier: */ 
 
    var linkRow = $(this).closest('.links'); 
 
    var showRow = linkRow.next('.toShow'); 
 
    var identify = $(this).index(); 
 
    
 
    // The rest is basically as before: 
 
    linkRow.find('li').removeClass('active'); 
 
    $(this).addClass('active'); 
 

 
    showRow.find("div:not(:eq(identify))").addClass("hide"); 
 
    showRow.find("div").eq([identify]).removeClass("hide"); 
 
});

.hide { 
 
    display: none; 
 
} 
 
.active { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row links"> 
 
    <ul> 
 
    <li>link 1</li><li>link 2</li><li>link 3</li> 
 
    </ul> 
 
</div> 
 
<div class="row toShow"> 
 
    <div>content 1</div><div>content 2</div><div>content 3</div> 
 
</div> 
 

 
<div class="row links"> 
 
    <ul> 
 
    <li>link 1</li><li>link 2</li><li>link 3</li> 
 
    </ul> 
 
</div> 
 
<div class="row toShow"> 
 
    <div>content 1</div><div>content 2</div><div>content 3</div> 
 
</div>