JQuery найти себя - PullRequest
       4

JQuery найти себя

6 голосов
/ 15 марта 2011

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

Сценарий находит элемент на основе выбора пользователя, но содержимое, включая разметку, является переменным. Поэтому скрипт будет искать элемент следующим образом:

$('.block').find(selector); // selector set by user

но нет простого способа заставить селектор выбрать «.block». Выбор родительского перед использованием find не является решением, так как есть несколько элементов .block.

Я знаю, что расширение селектора expr[":"] не будет работать, так как оно ищет только детей. Но я нашел способ " утиный удар " этим методом, сделав селектор ': self':

(function($){
    var orig = $.fn.find;

    $.fn.find = function(sel){
        return (sel === ':self') ? this : orig.call(this,sel);
    }

})(jQuery)

Но это кажется немного чрезмерным. И это замедлит обработку jQuery чуть-чуть с каждой функцией поиска. Есть ли другой способ сделать это?


Спасибо за ответы! Но в итоге я сделал это:

var b = $('.block'),
 el = (b.is(selector)) ? b : b.find(selector);

Ответы [ 6 ]

10 голосов
/ 16 марта 2011

подход с find ('*') будет намного более интенсивно использовать процессор, и я рекомендую:

$('.block').find(selector).add($('.block').filter(selector));
8 голосов
/ 30 ноября 2011

Я тоже сталкивался с этой проблемой.Я решил это так (в основном это решение Романа Малиновского как плагин jquery):

$.fn.findAll = function(selector) {
    return this.find(selector).add(this.filter(selector));
};
6 голосов
/ 15 марта 2011

РЕДАКТИРОВАНИЕ:

Вы можете использовать весь селектор '*' в сочетании с andSelf, чтобы получить выборку, содержащую элемент со всеми его потомками и дочерними элементами. Затем вы можете отфильтровать () этот выбор на выбранном селекторе.

<style type="text/css">li {background-color: white;}</style>
<script type="text/javascript">
$(function () {
  $('div').find('*').andSelf().filter(selector).css('background-color','blue');
}
</script>
<div>
This is a test
  <ul>
    <li class="test">This is a test</li>
    <li>This is a test</li>
    <li class="test">This is a test</li>
    <li>This is a test</li>
    <li class="test">This is a test</li>
    <li>This is a test</li>
  </ul>
</div>

Должен изменить фон всех объектов .test, а также начальный выбранный div, если это уместно. Я не уверен насчет эффективности моего ответа.

Пример: http://jsfiddle.net/7A9JJ/2/

EDIT Или вы можете просто сделать $ ('div, div *'). Filter (selector);

2 голосов
/ 24 июня 2014

С 1.8 можно сделать

$('.block').find(selector).addBack(selector);
1 голос
/ 04 сентября 2013

Я не уверен, почему это должно быть так сложно.Все это может быть сделано с помощью простого множественного селектора :

$(selector + '.block, .block ' + selector);

Нет find, filter или add, чтобы думать, плюс это более производительный во многих (большинстве?) Современных браузерах (протестировано с jQuery 1.9).

Предостережения :

  • Возможно, вы захотите урезать предоставленный пользователемselector заранее, поскольку здесь должны иметь значение конечные пробелы;
  • Это решение несколько специфично для вопроса ОП и не будет работать, если селектор целевого div начинается с имени элемента, то есть selector + 'th, th ' + selector не дастдействительный селектор;в таких случаях я бы порекомендовал использовать одно из более общих решений:
  • Вы все еще можете придерживаться подхода множественного выбора с КРАЙНЕ ХАКИ, НЕ ВСЕ РЕКОМЕНДУЕМЫМ подходом, который предусматривает использование псевдоселектора :not(): см. Рабочий демо и ужасно, ужасно производительность .
0 голосов
/ 24 августа 2011

Я создаю метод jquery findAll, как показано ниже

$.fn.findAll = function ( selector ) {
    if ( this.length === 0 ) {
        return this;
    } else if ( this.length === 1 ) {
        return this.filter( selector ).add( this.find( selector ) );
    } else {
        var rtn = this.filter( selector );
        this.each( function () {
            rtn.add( $( this ).find( selector ) );
        } );
        return rtn;
    }
}

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

$resultSet.findAll(selector)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...