Question

我正在尝试使用jQuery选择器来深入访问DOM。

HTML

<table>
...more stuff here
  <tr>
    <td class="foo bar clickable">
      <div>
         <div class="number">111</div> //I want to get the value "111"
         <div class="content"></div>
      </div>
    </td>
    <td class="foo2 bar2 clickable">
      <div>
         <div class="number">222</div>
         <div class="content"></div>
      </div> 
    </td>
  </tr>
...more stuff here
</table>

因此，用户点击td，然后我想弹出警告，显示“111”。

为了访问＆lt; div class="number">111</div>部分，我编写了jQuery选择器：

j$(".clickable").click(function() {

   //trying to output 111               
   alert( j$("this div div.number").text());
}

返回空白警告框。

alert( j$("this div.number").text());

alert( j$("this div .number").text());

尝试了几个我能想到的组合，所有人都给了我空白警报。我做错了什么？

Answer 1

您在任何地方都没有<this>元素，因此this div.number无效。如果您想从this开始并找到包含的div.number，那么您希望使用.find，如下所示：

j$(this).find('div.number').text()

或者，您可以使用context argument to jQuery：

j$('div.number', this).text()

Answer 2

请改为尝试：

$(".clickable").click(function() {

   //trying to output 111               
   alert( $(this).find("div div.number").text());
});

我不相信引号中的“this”有任何意义。

Answer 3

尝试此代码并使用fiddler练习： http://jsfiddle.net/

您可以粘贴HTML和JS代码，并模拟您想要的任何环境/框架。

如何使用Selector访问DOM元素？

3 个答案: