Get span information inside div

Question

I have the following HTML structure:

<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 text from the first span? I’ve tried several ways, for example:

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

However, to no avail.

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

Grateful.

Answer 1

closest search for elements in hierarchical levels higher than the element in question - in this case .procuraAluno.

Like the span is at the lower hierarchical level ("within" 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`.