在jQuery中查找div的ul的特定li类

时间：2018-08-06 12:20:45

标签： jquery

我有一个类似如下的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)")，但没有得到真正的结果。有人可以建议吗？

5 个答案:

答案 0 :(得分：2)

尝试一下：您可以在eq选择器中找到第5个锂，如下所示

$('#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>

答案 1 :(得分：1)

使用eq(5)：

$("#navbarSupportedContent li").eq(5).find('a').text('changed value');
<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">Login</a>
        </li>
        <li>
            <a href="#" data-toggle="modal" data-target="#loginModal">Partner Login</a>
        </li>
    </ul>
</div>

如果要使用nth-child，则需要使用值6，因为子计数从1开始：

$("#navbarSupportedContent li:nth-child(6) a").text('changed value');
<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">Login</a>
          </li>
          <li>
              <a href="#" data-toggle="modal" data-target="#loginModal">Partner Login</a>
          </li>
      </ul>
</div>

答案 2 :(得分：1)

我希望它将对您有帮助：

更改内容 

$('#navbarSupportedContent li').eq(5).html('<a href="#" data-toggle="modal" data-target="#loginModal">New text here</a>');
<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">Login</a>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#loginModal">Partner Login</a>
    </li>
  </ul>
</div>

更改/添加课程 

$('#navbarSupportedContent li').eq(5).addClass('newClass');
.newClass a {
 color: red;
 font-weight: 700; 
}
<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">Login</a>
    </li>
    <li>
      <a href="#" data-toggle="modal" data-target="#loginModal">Partner Login</a>
    </li>
  </ul>
</div>

答案 3 :(得分：0)

我认为您错过了<ul>标签。我不太擅长HTML和CSS，但请尝试$("#navbarSupportedContent ul li:nth-child(6)")并将nth-child更改为 6 。感谢Rory McCrossan指出nth-child的起始索引为1。

答案 4 :(得分：0)

$("#navbarSupportedContent ul a[data-target='#loginModal']").text("6e Login");

但是有两个li的{​​{1}}为data-target，因此此命令正在更改两个标签的文本。

相关问题
最新问题