CODEWITHSUNDEEP
jquerydebugginggoogle-chrome-devtoolsjavascript-debugger
akantoword
akantoword

Reputation: 3054

chrome dev tools jquery debugger returns [] for jquery object

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 var a = $("this").parent().siblings(); returns an empty array. I installed the jquery debugger extension on chrome but it didn't make a difference.

//render of function of reactjs component

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 function of the same component 

  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});
  }

Upvotes: 0

Views: 292

Answers (1)

Matt Zeunert
Matt Zeunert

Reputation: 16561

$("this").parent().siblings() should be $(this).parent().siblings().

If you pass a string into $, jQuery selects all elements matching that CSS selector. Passing in "this" means jQuery looks for <this> tags, and it doesn't find any.

$(this).parents() means jQuery will look for parents of the element referenced by this.

Upvotes: 1

Related Questions