2013-10-29 220 views
0

jQuery相當新,並且遇到問題。爲了清晰起見,將其簡化。jQuery選項卡 - 當前選項卡中的參考標籤?

比方說,我有3個選項卡,所有這些選項卡都有一個具有相同ID的按鈕和一個帶有相同ID的標籤。當用戶單擊選項卡1上的按鈕時,我想引用選項卡1上的標籤中的.html()。當用戶單擊按鈕選項卡2時,我想從選項卡2上的標籤引用.html() 。等等

有沒有一種簡單的方法來得到這個,或者我必須有每個標籤/按鈕做它的唯一ID?

在此先感謝。

編輯:添加代碼,這是我的index.jsp與現有的標籤:

<div id="tabs"> 
<ul> 
<li> 
<a href="${pageContext.request.contextPath}/your_searches" id="tab1"><span>My Searches</span></a> 
</li> 
<li> 
<a href="${pageContext.request.contextPath}/public_searches" id="tab2"><span>Public Searches</span></a> 
</li> 
<li> 
<a href="${pageContext.request.contextPath}/new_search" id="tab3"><span>New Search</span></a> 
</li> 

<li> 
<a href="#tabs-4" id="tab4">View Article</a> 
</li> 

</ul> 

<div id="tabs-1"></div> 
<div id="tabs-2"></div> 
<div id="tabs-3"></div> 
<div id="tabs-4"> <%@include file="view_article2.jsp"%></div> 

</div> 

<div id="dialog"      title="Alert!"></div> 
<div id="editDialog"     title="Alert!"></div> 
<div id="editDialogYourSearch"  title="Alert!"></div> 
<div id="updateSearchCriteriaDialog" title="Alert!"></div> 

存在是相當複雜的jQuery的,但使用該上的click事件增加了一個標籤:

$("#" + tabId).load($("#context").val() + '/resources/templates/searchResultsTemplate.html', function() { 

var html = $("#" + tabId).html(); 
$("#" + tabId).html(html.replace(/#tabId#/g, tabId)); 

var headlnTrEnabled = data.searchResults.searchVO.headlnTrEnabled; 
var docTrEnabled = data.searchResults.searchVO.docTrEnabled; 
var languageName = data.searchResults.searchVO.languageName; 

if(headlnTrEnabled == 0) { 
     document.getElementById("translated-" + tabId).disabled=true; 
     $("label[for='translated-" + tabId + "']").text("Language translation is unavailable for '" + languageName + "'"); 
} 

// Process the click event on the 'translated' checkbox 
processTranslationSupportedCheckboxEvents(tabId); 


//alert("new_search queryAndPopulateArticlesSearchResults: before populateResultsPageSearchCriteria"); 
// Set Search Criteria value in Search Results' hidden fields 
populateResultsPageSearchCriteria(data.searchResults, tabId); 

// Initialize DataTable 
initDataTable('#articleTable-' + tabId); 

// Define double-click method on data rows 
initArticleTableDoubleClick('#articleTable-', 
                 tabId, 
                 data.searchResults.searchVO.languageCode, 
                 "#error"); 

// Populate Search Results UI from article list 
// var counter = populateSearchResultsTable(tabId, data.searchResults.articleList); 
checkHighlight(); 

$('#searchInfo').html(data.hash); 

在這些添加的選項卡(searchResultsTemplate.html)中,我需要引用按鈕單擊中的標籤。下面是簡單的HTML我有thusfar:

<input type="checkbox" id="translated-#tabId#"/><label for="translated-#tabId#">Translate Article Titles</label> 

<div align="right"><input type="button" value="Export Excel CSV File.." id="exp-csv" /> 
<br> 
<label id="DownloadLink"></label> 
</div> 

<input id = "btnSubmit" type="submit" value="Release"/> 

<p id="searchTitle-#tabId#" name="searchTitle"></p> 

<label id="searchInfo">None</label> 

的#EXP-CSV按鈕需要引用當前所選選項卡上的#searchInfo標籤。

+1

您需要使用DOM遍歷來實現這一點,但我們需要查看您的HTML以向您顯示如何。 –

+0

ID根據定義是唯一的,並且在您的HTML中包含重複的id屬性是無效的。請發佈您的HTML,以便我們確信您有什麼以及您嘗試完成什麼 –

+0

已更新,以添加代碼。 – ev0lution37

回答

0

不確定與德HTML你的目標是,但我想你的意思是這樣:

$(".tab").children("button").on("click", function() { 
    var genericVariable = $(this).siblings("label").html(); 
}); 

被警告,這僅適用於兄弟元素(相鄰單元)。如果標籤標籤位於與teh按鈕分開的另一個標籤內,那麼您必須先用父項(例如eq(-1))向上遍歷標籤樹,然後向下到具有標籤的標籤。

0

從JQuery論壇上得到了一些人的幫助,並解決了它。

我最終使用:

$(this).closest('div').find('.class').html(); 

走過了元素到最近的股利,然後回到了DIV找到最近的相關類文件,然後返回的HTML。

感謝您的幫助,夥計們。

相關問題