CODEWITHSUNDEEP
jquery
Ambika Tewari
Ambika Tewari

Reputation: 251

Find specific li class of ul of div in jquery

I have an html like below :

<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>

I want to select and change the html of Login li class. How can I do that ? I tried $("#navbarSupportedContent li:nth-child(5)") but this is not yielding true result. Can anyone advise?

Upvotes: 0

Views: 762

Answers (5)

Ambika Tewari
Ambika Tewari

Reputation: 251

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

but there are two li who has data-target as #loginModal, so this command is changing text for both tabs.

Upvotes: 0

Matt
Matt

Reputation: 492

I hope it will help:

CHANGING CONTENT

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

CHANGING/ADDING A CLASS

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

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Use 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>

If you want to use nth-child then you need to use the value 6 as child count start from 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>

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this:you can find 5th li with eq selector in jquery like below

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

See below code

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

Upvotes: 2

Code Enjoyer
Code Enjoyer

Reputation: 701

I think you missed the <ul> tag. I'm not too good at HTML & CSS, but try $("#navbarSupportedContent ul li:nth-child(6)") Also change the nth-child to 6. Thanks to Rory McCrossan for pointing out the start index of nth-child is 1.

Upvotes: 0

Related Questions