jquery 判断当前标签的标签是啥

Posted 2023-04-28

<div class="test">test</div>
<input type="text" class="test1">

$(".test").click(function()
alert("此样式所对应的样式名是 div");

)
$(".test1").click(function()
alert("此样式所对应的样式名是 input");
)
不知是否看的懂我想要的效果

<div class="test">test</div>
<input type="text" class="test1">
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(".test").click(function()
alert("此样式所对应的样式名是 "+$(this)[0].tagName);
)
$(".test1").click(function()
alert("此样式所对应的样式名是 "+$(this)[0].tagName);
)
</script>

参考技术A

你的意思是不是不管点击页面的哪里，都要判断当前被点击到的标签节点的标签名？

如果是这样的话，就这样来做：

//在body里点击时，也就是在页面任何一个地方点击时：
$("body").on("click",function(e)
    //获取当前点击的标签节点名称
    var tagName=e.target.tagName;
    //上面已经获取到被点击的标签节点的名称了，下面你可以继续你想要的操作了。
);

给你一个在线演示的地址：

jquery获取当前点击的标签节点名称的方法

参考技术B $(".test").click(function()
    alert(this.tagName);
)
$(".test1").click(function()
    alert(this.tagName);
)

本回答被提问者采纳

jQuery Tabs - 当前选项卡中的引用标签？

【中文标题】jQuery Tabs - 当前选项卡中的引用标签？

【英文标题】：jQuery Tabs - Reference label in current tab?

【发布时间】：2013-10-29 13:31:59

【问题描述】：

对 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 相当复杂，但使用此方法在点击事件上添加了一个选项卡：

$("#" + 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：

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

【问题讨论】：

您需要使用 DOM 遍历来实现这一点，但我们需要查看您的 HTML 以向您展示具体方法。

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

【参考方案1】：

不确定您使用 html 的目标是什么，但我认为您的意思是这样的：

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

请注意，这只适用于兄弟元素（相邻元素）。如果标签标签位于与按钮分开的另一个标签内，那么您必须首先使用 parents().eq(-1) 向上遍历标签树，然后向下遍历带有标签的标签。

【参考方案2】：

在 JQuery 论坛上得到某人的帮助并解决了它。

我最终使用了：

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

从元素中遍历到最近的div，然后回到div中找到最近的相关类文件，然后返回HTML。

谢谢你们的帮助，伙计们。