chrome dev tools jquery debugger возвращает [] для объекта jQuery

Question

Я использую jQuery для доступа к DOM, чтобы найти братьев и сестер и родителей, а затем, когда я бросаю отладчик в свой js-файл, а затем загружаю его в chrome dev tools , мой объект jquery, такой как var a = $("this").parent().siblings(); , возвращает пустой массив. Я установил расширение отладчика jquery на chrome, но это не повлияло.

// визуализации функции компонента reactjs

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

// JS функции одного и того же компонента

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 > nameB) { 
     return 1; 
     } else { 
     return -1; 
     } 
    }); 
    this.setState({contacts: contacts}); 
    } 

Answer 1

$("this").parent().siblings() должно быть $(this).parent().siblings().

Если вы передаете строку в $, jQuery выбирает все элементы, соответствующие этому селектору CSS. Передача в "this" означает, что jQuery ищет <this> теги, и он не находит.

$(this).parents() означает, что jQuery будет искать родителей элемента, на который ссылается this.