Get span information inside div

0

I have the following structure in HTML:

<div class="ui fluid search dropdown procuraAluno selection multiple active visible">

   <select name="ci_direcionado" id="cisOptions" multiple="">
      <option value=""></option>
   </select>

   <i class="dropdown icon"></i>

   <input class="search" autocomplete="off" tabindex="0" >

   <span class="sizer" style="">Anderson Amorim</span>

   <span class="sizer"></span>

   <div class="text filtered"></div>

   <div class="menu transition visible" tabindex="-1" style="display: 
   block !important;">

   <div class="message">No results found.</div>

</div>

How do I get the first span text? I've tried it in several ways, for example:

 $(".procuraAluno").closest('.sizer').first().change(function(){
    console.log($(".procuraAluno").next().text());
 });

But to no avail.

Remembering that the creation of 2 span is inherent in my will, the very template that creates it.

Thank you.

    
asked by anonymous 31.05.2018 / 20:12

1 answer

1

closest looks for elements in hierarchical levels greater than the element in question - in the case .procuraAluno .

As span is at the lower hierarchical level ("inside" of .procuraAluno ), you can use find .

var text = $(".procuraAluno").find('.sizer').first().html();

Trigger event change

var $span = $(".procuraAluno").find('.sizer').first();

$span.on("change", function() {  // "Vigia" mudanças no 'span'
  alert($(this).html());
})

$span.html("Olá");        // Altera o valor do span
$span.trigger("change");  // Dispara o evento 'change'.
    
31.05.2018 / 20:21