chrome 开发工具 jquery 调试器为 jquery 对象返回 []答案

【问题标题】：chrome dev tools jquery debugger returns [] for jquery objectchrome 开发工具 jquery 调试器为 jquery 对象返回 []
【发布时间】：2016-06-29 00:28:48
【问题描述】：

我正在使用 jQuery 通过 DOM 来查找兄弟姐妹和父母等，但是当我将调试器放入我的 js 文件中然后将其加载到 chrome 开发工具中时，我的 jquery 对象（例如 var a = $("this").parent().siblings(); 返回一个空数组。我在 chrome 上安装了 jquery 调试器扩展，但没有任何区别。

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

【问题讨论】：

你能在 Question 中加入 html , js 吗？ $(this) 的父元素有兄弟姐妹吗？
@guest271314：我已经添加了 html 和 js（或反应组件部分）并且我的东西可以工作，但我只想知道如何在将来调试而不必使用 console.log并改用调试器。

标签： jquery debugging google-chrome-devtools javascript-debugger

【解决方案1】：

$("this").parent().siblings() 应该是$(this).parent().siblings()。

如果您将字符串传递给$，jQuery 会选择与该 CSS 选择器匹配的所有元素。传入"this" 表示jQuery 查找<this> 标签，但没有找到。

$(this).parents() 表示 jQuery 将寻找 this 引用的元素的父元素。

【讨论】：