jQuery选项卡 - 当前选项卡中的参考标签？

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标签。

来源

2013-10-29 ev0lution37

您需要使用DOM遍历来实现这一点，但我们需要查看您的HTML以向您显示如何。 –

ID根据定义是唯一的，并且在您的HTML中包含重复的id属性是无效的。请发布您的HTML，以便我们确信您有什么以及您尝试完成什么 –

已更新，以添加代码。 – ev0lution37

不确定与德HTML你的目标是，但我想你的意思是这样：

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

被警告，这仅适用于兄弟元素（相邻单元）。如果标签标签位于与teh按钮分开的另一个标签内，那么您必须先用父项（例如eq（-1））向上遍历标签树，然后向下到具有标签的标签。

来源

2013-10-29 13:40:40

从JQuery论坛上得到了一些人的帮助，并解决了它。

我最终使用：

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

走过了元素到最近的股利，然后回到了DIV找到最近的相关类文件，然后返回的HTML。

感谢您的帮助，伙计们。

来源

2013-10-29 16:31:07 ev0lution37

jQuery选项卡 - 当前选项卡中的参考标签？

回答

相关问题