chrome dev tools jquery debugger returns [] for jquery object
<p>I'm using jQuery to go through the DOM to find siblings and parents and such but then when I throw debugger into my js file and then load it up in chrome dev tools, my jquery object such as     <code>var a = $("this").parent().siblings();</code>
returns an empty array. I installed the jquery debugger extension on chrome but it didn't make a difference.</p>

<p>//render of function of reactjs component</p>

<pre><code>render: function ({
    var contactsDisplayed = contacts.map(function (contact, index) {
          return (
            &lt;tr key={index}&gt;
              &lt;td&gt;&lt;Link to={`/${contact.id}`}&gt;&lt;div&gt;{contact.firstName}&lt;/div&gt;&lt;/Link&gt;&lt;/td&gt;
              &lt;td&gt;{contact.lastName}&lt;/td&gt;
              &lt;td&gt;{contact.city}&lt;/td&gt;
              &lt;td&gt;{contact.phone}&lt;/td&gt;
              &lt;td&gt;{contact.email}&lt;/td&gt;
              &lt;td&gt;&lt;Link to={`/${contact.id}`}&gt;Click To View Me&lt;/Link&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type="checkbox" value="readOnly" checked={that.state.deleteList.includes(contact.id)} onClick={that.addToDeleteList.bind(that, contact.id)}/&gt;&lt;/td&gt;
            &lt;/tr&gt;
          );
        });
        return(
          &lt;div className="contact-list"&gt;
            &lt;h1&gt;All Contacts&lt;/h1&gt;
            &lt;table className="contact-list-table"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;First Name&lt;span className="glyphicon glyphicon-triangle-right" onClick={this.sortContacts.bind(this, "firstName")}&gt;&lt;/span&gt;&lt;/th&gt;
                  &lt;th&gt;Last Name&lt;span className="glyphicon glyphicon-triangle-right" onClick={this.sortContacts.bind(this, "lastName")}&gt;&lt;/span&gt;&lt;/th&gt;
                  &lt;th&gt;City&lt;/th&gt;
                  &lt;th&gt;Phone Number&lt;/th&gt;
                  &lt;th&gt;Email&lt;span className="glyphicon glyphicon-triangle-right" onClick={this.sortContacts.bind(this, "email")}&gt;&lt;/span&gt;&lt;/th&gt;
                  &lt;th&gt;View Me&lt;/th&gt;
                  &lt;th&gt;Delete&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;{contactsDisplayed}&lt;/tbody&gt;
            &lt;/table&gt;
            &lt;button onClick={this.deleteEntries}&gt;Delete All Checked Entries&lt;/button&gt;
            &lt;button&gt;&lt;Link to={`/new`}&gt;Make New Entry&lt;/Link&gt;&lt;/button&gt;
            &lt;input onChange={this.handleFilter} type="text" value={this.state.filterString}/&gt;
          &lt;/div&gt;
});
</code></pre>

<p>// js function of the same component </p>

<pre><code>  sortContacts: function (parameter, e){
    var a = $("this").parent().siblings().find("span");
    $('.glyphicon-triangle-bottom').removeClass('glyphicon-triangle-bottom').addClass('glyphicon-triangle-right');
    $(e.target).removeClass('glyphicon-triangle-right').addClass('glyphicon-triangle-bottom');
    var contacts = this.state.contacts.sort(function (a, b){
      var nameA = a[parameter].toLowerCase(), nameB = b[parameter].toLowerCase();
      if (nameA &gt; nameB) {
        return 1;
      } else {
        return -1;
      }
    });
    this.setState({contacts: contacts});
  }
</code></pre>