Селекторы двоеточия jQuery и CSS - PullRequest
Новая
       20

Селекторы двоеточия jQuery и CSS

2 голосов
/ 12 августа 2011

В jQuery, скажем, у нас есть 2 способа навигации по элементам DOM:

  1. С помощью селекторов двоеточия CSS (например, var x = $("#someElement:after"))
  2. Через jQueryфункции (например, var x = $("#someElement").prev())

Теперь мои вопросы:

  1. Является ли тип возврата одинаковым в обоих случаях?
  2. В чем разницав навигации по DOM в обоих подходах?
  3. Можем ли мы применить одну и ту же функцию jQuery к результату обоих этих операторов?Например, x.css("someProp","someVal")

Ответы [ 2 ]

2 голосов
/ 12 августа 2011

:after - это псевдоэлемент CSS, который не поддерживается jQuery.Документация для селекторов jQuery находится здесь: http://api.jquery.com/category/selectors/

Полагаю, эквивалентом того, что вы ищете, является селектор брата: +: 

// select whatever element comes after #someElement
var x = $("#someElement + *");

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

Результат возврата, независимо от методов, используемых для поиска ваших элементов, абсолютно одинаков.

1 голос
/ 12 августа 2011

Я не уверен, что ": after" существует, но кроме этого:

1) Тип возвращаемого значения будет одинаковым для любого из них (при условии, что он является действительным селектором)

2) Разница довольно небольшая, в основном она связана с тем, как вы предпочитаете поступать с вещами, и в некоторых случаях «: first» может быть не совсем тем, что вы хотите, например, в цикле. Существуют аргументы, из-за которых накладные расходы самые лучшие, но я не знаю достаточно, чтобы комментировать.

3) Абсолютно, поскольку тип возвращаемого значения точно такой же (элемент jQuery), вы можете использовать их точно так же.

например: $ ( "# Test") родитель (). вернется точно так же, как $ ( "# Тесты: родитель");

Пример: http://jsfiddle.net/HenryGarle/2qcpK/

<div id="Parent1">
    <div id="Test1">Text</div>
</div>

<div id="Parent2">
    <div id="Test2">Text</div>
</div>


// replaces the content of Test1's parent
$("#Test1").parent().html("New Parent 1 content");

// replaces the content of Test2's parent
$("#Test2:parent").html("New Parent 2 content");

В результате DOM будет выглядеть следующим образом: 

<div id="Parent1">
    New Parent 1 content
</div>

<div id="Parent2">
    New Parent 2 content
</div>
...