时间戳

首页 > 解决方案 > 在jquery中查找div的ul的特定li类

jquery - 在jquery中查找div的ul的特定li类

问题描述

我有一个如下的html：

<div id="navbarSupportedContent">
            <ul navbar-nav="" mr-auto="">
                <li>
                    <a href="#" class="link-has-menu">Planning</a>
                 </li>
                <li>
                    <a href="#" class="link-has-menu">Destinations</a>
                </li>
                <li>
                    <a href="#">Bookings</a>
                </li>
                <li>
                    <a href="#">Travel information</a>
                </li>
                <li>
                    <a href="#">Promotions</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#loginModal">Login</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#loginModal">Partner Login</a>
                </li>
            </ul>
</div>

我想选择和更改Login li 类的 html。我怎样才能做到这一点 ？我试过$("#navbarSupportedContent li:nth-child(5)")了，但这并没有产生真正的结果。任何人都可以建议吗？

标签： jquery

解决方案

试试这个：你可以eq在 jquery 中找到带有选择器的 5th li，如下所示

$('#navbarSupportedContentul li:eq(5) a').html('new text');

见下面的代码

$(function(){
  //$('#loginMenu').html('changed TEXT'); -- ID option not available so cannot use it
  $('#navbarSupportedContent ul li:eq(5) a').html('Changed TEXT');  
  //$('#navbarSupportedContent ul li a[data-target="#loginModal"]').html('Changed TEXT'); -- This will change two li values
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbarSupportedContent">
            <ul navbar-nav="" mr-auto="">
                <li>
                    <a href="#" class="link-has-menu">Planning</a>
                 </li>
                <li>
                    <a href="#" class="link-has-menu">Destinations</a>
                </li>
                <li>
                    <a href="#">Bookings</a>
                </li>
                <li>
                    <a href="#">Travel information</a>
                </li>
                <li>
                    <a href="#">Promotions</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#loginModal" id="loginMenu">Login</a>
                </li>
                <li>
                    <a href="#" data-toggle="modal" data-target="#loginModal">Partner Login</a>
                </li>
            </ul>
</div>

推荐阅读