Javascript получить элемент по его свойствам

Question

Каждый элемент HTML имеет значения смещения.Могу ли я вернуть элемент, который имеет, например, offsetLeft > 10?

Никогда не слышал об этой функции, поэтому вопрос.

Я знаю, что это можно сделать с помощью циклов,но это медленно.Я имел представление о XPath, но не могу найти что-либо связанное со свойствами в справочной информации.

Заранее спасибо!

PS Нет необходимости в устаревшей совместимости браузера - HTML5'ish может это сделать.

Answer 1

Насколько я знаю, нет способа сделать это, не включающего циклы какой-либо формы.Вы могли бы сделать это в стандартном JS с чем-то вроде этого:

var elems = document.getElementsByTagName("*"),
    myElems = [];
for(var i = 0; i < elems.length; i++) {
   if(elems[i].offsetLeft > 10) myElems.push(elems[i]);
}

Или, если вы используете jQuery, вы можете сделать это с немного меньшим количеством кода (но это, вероятно, даже медленнее!):

var myElems = $("*").filter(function() {
    return $(this).offset().left > 10;
});

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

Answer 2

Я бы предложил лучший способ сделать это - расширить селекторы jQuery. Что-то вроде этого работает хорошо:

$.extend($.expr[':'],{

        offsetLeft: function(a,i,m) {
            if(!m[3]||!(/^(<|>|=)\d+$/).test(m[3])) {return false;}
            var offsetLeft = $(a).offset().left;
            return m[3].substr(0,1) === '>' ?
                 offsetLeft > parseInt(m[3].substr(1),10) :
                     m[3].substr(0,1) === '<' ? offsetLeft < parseInt(m[3].substr(1),10) :
                         offsetLeft == parseInt(m[3].substr(1),10);
        }
});

Это позволит вам выбирать элементы, используя синтаксис, такой как

$('span:offsetLeft(>10)')

или

$('.someClass:offsetLeft(<10)')

или даже

$('.someClass:offsetLeft(=10)')

Живой пример: http://jsfiddle.net/X4CkC/

Следует добавить, что это подключает селекторы jQuery, которые обычно довольно быстрые, но, несомненно, где-то глубоко внутри происходит цикл. Этого не избежать.

Answer 3

jQuery может легко выбирать атрибуты элементов

<div>Dont find me</div>
<div this="yes">Find me</div>

$('div[this=yes]'); // will select the second div

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

Answer 4

Вы можете легко сделать это с помощью jQuery

$("*").each(function(index, elem){
    if($(this).offset().left > 10){
        // do something here with $(this)
    }
});

Answer 5

Вы уже смотрели эту страницу? смещение