如何选择 $(this) JQuery 选择器选择的元素内的第一个 div?

Posted

技术标签:

【中文标题】如何选择 $(this) JQuery 选择器选择的元素内的第一个 div?【英文标题】:How to select the first div inside the element selected by the $(this) JQuery selector? 【发布时间】:2015-12-06 15:42:40 【问题描述】:

进入一个 JSP 页面我有这样的东西:

<!-- Bottone relativo ai progetti WIFI: -->
<a title="WIFI" href="javascript: void(0)" id="showWifi_$item.index" class="showWifi">
    <div class="news_box news_box_01 hvr-underline-from-center " style="margin-right: 50px;"></div>
</a>

我是 JQuery 的新手,遇到以下情况:

如您所见,我的 a 标签具有 id="showWifi_$item.index" 其中 item.index是由更外部的迭代生成的值。

在这个页面我有这个 JQuery 脚本:

$(".showWifi").click(function(event)

    clickedButton = this.id;      

    splitButtonId = clickedButton.split("_"); 

    idToShow = "progettiWifi_" + splitButtonId[1];
    idToHide = "progettiPnsd_" + splitButtonId[1];

    document.getElementById(idToShow).style.display = 'block';
    document.getElementById(idToHide).style.display = 'none';

    //$(this).addClass("highLightButton");

    $('a.showWifi div').first().addClass('highLightButton');
    $('a.showPnsd div').first().removeClass('highLightButton');


);

最后 2 行选择 a 标记内的第一个 div,其中具有 showWifi 作为类。问题是我必须使用 **$(this) 元素内的第一个 div 替换这些行,该 div 表示单击的元素。

我该怎么做?

【问题讨论】:

【参考方案1】:

如果&lt;a&gt; 内有多个divs,可以使用以下代码获取第一个div。

$(this).find('div').first().addClass('highLightButton');

请查看此解决方案:How can I use JQuery to select the first div element inside a container element?

【讨论】:

【参考方案2】:

由于.showWifi 中只有一个 div,因此您不需要first()

 $(this).find('div').addClass('highLightButton');

【讨论】:

【参考方案3】:

试试这个:

$(this).children('div:first').addClass('highLightButton');
$(this).children('div:first').removeClass('highLightButton');

更多信息:https://api.jquery.com/first-selector/

【讨论】:

如果你想要的 div 是被点击元素的直接后代,你也可以使用 .children()。

以上是关于如何选择 $(this) JQuery 选择器选择的元素内的第一个 div?的主要内容,如果未能解决你的问题,请参考以下文章

如何从 jQuery 对象中获取选择器

jQuery 如何使 $(this) 选择器触发多个类

如何从 jQuery 选择器中排除 $(this)?

当涉及到“this”选择器时,jQuery 的层次结构是如何工作的?

jquery之选择器

jQuery如何使$(this)选择器触发多个类