How to get a value of current index by escape any element using Jquery?

Question

I want to select a value of current index from html using Jquery as below code. Issue I can get my current index value but I want to escape all the value in tag a mean that I want to select only text of Span .

Here is HTML

<div class="col-lg-3">
  <div class="data">
   <ul id="vurl">
      <li><a class="vdurl">Some Video</a><span class="url" style="display: none;">PRP_CMiFEYQ</span></li>
      <li><a class="vdurl">Some Video</a><span class="url" style="display: none;">PRP_CMiFEYQ</span></li>
      <li><a class="vdurl">Some Video</a><span class="url" style="display: none;">PRP_CMiFEYQ</span></li>
      <li><a class="vdurl">Some Video</a><span class="url" style="display: none;">PRP_CMiFEYQ</span></li>
      <li><a class="vdurl">Some Video</a> <span class="url" style="display: none;">PRP_CMiFEYQ </span> </li>
  </ul>
 </div>

Here is Jquery.

 <script>
   $(document).ready(function(){
      $('ul#vurl li').on('click', function () {
        alert($(this).parent().text());
        console.log($('li.vdurl span.url').parent().text());
    });
   });
</script>

Answer 1

Make it:

$(document).ready(function(){

    $('ul#vurl li').on('click', function () {

        console.log( $(this).children('span').text() );

    });

});

This way on click you will get the text of the SPAN element contained in clicked LI element

Answer 2

You can use find to find the span within the li tag and get its text :

 $(document).ready(function(){ $('ul#vurl li').on('click', function() { //alert($(this).parent().text()); alert($(this).find('span').text()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-lg-3"> <div class="data"> <ul id="vurl"> <li><a class="vdurl">Some Video1</a><span class="url" style="display: none;">PRP_CMiFEYQ1</span></li> <li><a class="vdurl">Some Video2</a><span class="url" style="display: none;">PRP_CMiFEYQ2</span></li> <li><a class="vdurl">Some Video3</a><span class="url" style="display: none;">PRP_CMiFEYQ3</span></li> <li><a class="vdurl">Some Video4</a><span class="url" style="display: none;">PRP_CMiFEYQ4</span></li> <li><a class="vdurl">Some Video5</a> <span class="url" style="display: none;">PRP_CMiFEYQ5 </span> </li> </ul> </div> 

Answer 3

You can use .find to and its good to be more specific on elements

$(document).ready(function(){
    $('ul#vurl li').on('click', function () {
        console.log( $(this).find('span.url').text() );
    });
});