Как получить доступ к элементу DOM с помощью Selector?

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" .

Чтобы получить доступ к <<code>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 аргумент jQuery:

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

Answer 2

Попробуйте вместо этого:

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

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

Я не верю, что "это" в кавычках имеет какое-либо значение.

Answer 3

попробуйте этот код и попрактикуйтесь с fiddler: http://jsfiddle.net/

Вы можете вставить свой HTML и JS-код и смоделировать любую среду / среду, какую пожелаете.