CODEWITHSUNDEEP
javascriptjquery
Michael
Michael

Reputation: 13636

How can I fetch value from anchor element nested in li element

I have this ul li html element:

 <ul id="langMenu" class="top-links list-inline">
                        <li>
                            <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />NORSK</a>
                            <ul class="dropdown-langs dropdown-menu">
                                <li><a value="no" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />NORSK</a></li>
                                <li class="divider"></li>
                                <li><a value="us" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a></li>
                                <li><a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> GERMAN</a></li>

                            </ul>
                        </li>
                    </ul>

when I implement selection I need to fecth value of the selected element.

For example:

If user selected English I need to get en value from anchor. If user selected Norsk I need to get no value from anchor.

How can I fetch value from anchor element nested in li element using jquery?

Upvotes: 2

Views: 1223

Answers (3)

Diego
Diego

Reputation: 21

You can add a click event listener for the <li> element and search for a child anchor element <a>.

$('.dropdown-langs li').on('click', function () {
  var value = $(this).children('a').attr('value');
  console.log(value)
});

Also, you should use data-value instead of just value.

data-*

The data-* attributes gives us the ability to embed custom data attributes on all HTML elements.

JQuery has a specific method for retrieving data values.

  var value = $(this).children('a').data('value');

Upvotes: 2

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

This code will take the value of your link but only on links that is inside your langMenu nested ul li

$('#langMenu ul li').click(function() {
  console.log($(this).find('a').attr("value"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="langMenu" class="top-links list-inline">
  <li>
    <a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />NORSK</a>
    <ul class="dropdown-langs dropdown-menu">
      <li>
        <a value="no" tabindex="-1"><img class="flag-lang" src="~/assets/images/flags/no.png" width="16" height="11" alt="lang" />NORSK</a>
      </li>
      <li class="divider"></li>
      <li>
        <a value="us" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/us.png" width="16" height="11" alt="lang" /> ENGLISH</a>
      </li>
      <li>
        <a value="de" tabindex="-1"><img class="flag-lang" src="/assets/images/flags/de.png" width="16" height="11" alt="lang" /> GERMAN</a>
      </li>

    </ul>
  </li>
</ul>

Upvotes: 2

&#193;lvaro Touz&#243;n
&#193;lvaro Touz&#243;n

Reputation: 1230

as i can understand, you can do like this:

$('a').click(function(event){
console.log($this).attr('value');
event.preventDefault();
});

Upvotes: 2

Related Questions