это, текущий контекст, когда я должен использовать в JQuery? - PullRequest
Новая
       35

это, текущий контекст, когда я должен использовать в JQuery?

0 голосов
/ 19 ноября 2009

Я не очень уверен с использованием «this» [текущий контекст] в jquery. Что я знаю, так это - он не позволяет dom искать все элементы, он просто работает с этим текущим элементом, что повышает производительность я, если я не прав]. Также я не уверен, когда использовать это, а когда нет. скажем, я должен пойти на 

  $("span",this).slice(5).css("display", "none")

или 

 $("span").slice(5).css("display", "none")

оба будут работать, но мне не очень понятно, как на самом деле это работает. Кто-нибудь может объяснить это с помощью другого примера, и когда что использовать? [EDIT] 

      $(function() {
        $("#clickme").click(function() {
            $("span",this).slice(5).css('display', 'block');//doesn't work ? why?
             $("span").slice(5).css('display', 'block');//works..why?

        });
    });
enter code here <span id="clickme">Click me</span>
                 <span>itam1</sapn>
                <span>itam2</sapn>
                <span>itam3</sapn>
                 <span>itam4</sapn>
                    <span>itam5</sapn>
                    ...upto10

Ответы [ 2 ]

0 голосов
/ 19 ноября 2009

Как это работает

Позволяет использовать этот HTML для примеров: 

<div id="container">
   <div class="column"><a href="#">Link 1</a></div>
   <div class="column"><a href="#">Link 2</a></div>
</div>
<div id="footer">
   <a href="#">Link 3</a><a href="#">Link 3</a>
</div>

Параметр scoping функции jQuery следует использовать только в том случае, если у вас уже есть кэшированная ссылка на элемент DOM или набор обернутых элементов jQuery: 

var $set = $('#container');
$('a', $set).hide(); // Hides all 'a' tag descendants of #container

Или в случае: 

$("#container").click(function(e){
   $('a', this).hide(); // Same as call above
}

Но нет смысла использовать его так: 

$('a', '#container').hide()

Когда это должно быть написано так: 

$('#container a').hide();

Сказав все это, обычно все яснее и яснее просто использовать .find() вместо использования второго параметра в функции jQuery, если у вас уже есть элемент jQuery или DOM. Первый пример, который я привел, будет написан так: 

var $set = $('#container');
$set.find('a').hide(); // Hides all 'a' tag descendants of #container

Если этот единственный вызов был единственной причиной, по которой вы захватили объект #container, вы также можете написать его таким образом, поскольку он все еще будет ограничивать поиск элементом #container: 

$("#container a").hide(); // This is the same as $('a', "#container");

Зачем вам выбор? 1030 *

Когда jQuery ищет селектор с незаданной областью, он ищет весь документ. В зависимости от сложности селектора, это может потребовать много поиска. Если вы знаете, что искомый элемент встречается только внутри определенного родителя, он действительно ускорит ваш код, чтобы охватить выделение этим родителем.

Независимо от того, какой метод определения области действия вы выберете, вы всегда должны использовать селекторы всегда, когда это возможно.

0 голосов
/ 19 ноября 2009

Обычно вы можете использовать ключевое слово this в обработчиках событий, поскольку оно будет ссылкой на элемент, который вызвал событие, и на другие функции jQuery, такие как $.each.

Например, при обработке события щелчка скажем: 

$('.parentElement').click(function () {
  $('.foo', this).hide();
});

Приведенный выше код скроет все элементы с классом foo, которые являются потомками текущего parentElement, по которому щелкнули.

Использование аргумента контекста функции jQuery эквивалентно вызову метода find: 

$(expr, context);
// is just equivalent to:
$(content).find(expr);

РЕДАКТИРОВАТЬ: Глядя на ваш пример: 

    $("#clickme").click(function() {
      $("span",this);//... (1)
      $("span");//..       (2)
    });

Первая строка будет искать все элементы span, которые находятся внутри из #clickme (его потомки ), так как этот элемент вызвал click событие.

Вторая строка, будет искать всех span элементов на всей странице.

...