Как разработать плагин Jquery, чтобы найти первого потомка, соответствующего селектору?

Question

Я пытаюсь создать плагин Jquery (findFirst()), чтобы найти первого потомка с заданными характеристиками (что-то посередине функций find() и children(). Например, с учетом этой разметки:

<div id="start">
    <div>
        <span>Hello world</span>
        <ul class="valid-result"> ... </ul>
        <ul class="valid-result">
            <li>
                <ul class="not-a-result"> ... </ul>
            </li>
        </ul>
        <div>
            <ul class="valid-result"> ... </ul>
        </div>
    </div>
</div>

Если вы запросите $("#start").findFirst('ul'), он должен вернуть все ul списки, которые я пометил классом valid-result , но не ul с класс не-результат . То есть эта функция должна найти первые элементы, которые соответствуют данному селектору, но не внутренние элементы, которые соответствуют этому селектору.

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

jQuery.fn.findFirst = function (sel) {
    return this.map(function() {
        return $(this).children().map(function() {
            if ($(this).is(sel)) {
                return $(this);
            } else {
                return $(this).findFirst(sel);
            }
        });
    });
} 

Он работает в том смысле, что пытается вернуть ожидаемый результат, но формат, в котором он возвращает результат, очень редок для меня. Полагаю, проблема в том, чего я не понимаю в Jquery. Здесь у вас есть JFiddle , где я тестирую.

EDIT

Ожидаемый результат после $("#start").findFirst('ul') равен набором со всеми UL, имеющими класс 'valid-result', НО невозможно использовать этот класс, потому что он не существует в реальном случае ( это просто попытка объяснить результат).

Это не эквивалентно first (), потому что first возвращает только один элемент!

Answer 1

Вам не нужно создавать плагин. используйте встроенный jQuery .first() и, как предлагает Марк, вы также можете использовать первый селектор :first

$("#yourselector ul").first();

Вот примеры использования в вашем случае

$("#start").find("ul").first().css("background", "red");
   //For Short $("#start ul").first()

Чтобы использовать фильтр классов, используйте селектор атрибута

$("#start").find("ul[class=valid-result]").first().css("background", "red");
   //For Short $("#start ul[class=valid-result]").first()

Демо

---

Обновление

Если вы хотите выделить только внешние ul с классом valid-result, тогда first() вообще не нужен

$("#start ul[class=valid-result]").css("background", "red");

Но, поскольку внутренний ul также будет использовать фон в моем примере, вам может потребоваться установить другой фон для внутренних ul. Вот пример

---

Обновление 2

Если вы хотите выбрать первый уровень <ul>, тогда

$("#start div").chilrent("ul"); //this will return the first level of ul inside the div

Answer 2

Вы можете сделать что-то вроде этого:

var selector='ul';

var $results= $('#start '+selector).not( selector +' '+selector);

Метод not() исключит элементы, которые соответствуют селектору, но также являются потомками того же селектора

Answer 3

селекторов, которые все дают результат для вашего примера:

$ ('# start> *> ul') $ ( '# Старт'). Дети (). Найти ( '> ул') $ ( '# Старт'). Детей ( 'DIV'). Найти ( 'пядь'). Братьев и сестер ( 'уль')

$('#start').children().find('span').siblings('ul')
$('#start').find('span').siblings('ul')

редактировать: пример пыльника:

$('#start>div>span').siblings('ul')
$('#start').find('div').find('span').siblings('ul')
$('#start>div>span').siblings('ul')

WOOPS, СКАЧАТЬ ВСЕ ЭТО, я пропустил этот последний внутренний UL в div ...

ТАК: это (я проверил это) ПОЛУЧАЕТ ли тот ребенок ul элемента div, но не внутри li

 $('#start div').find('>ul')
 $('#start div>ul')

То, что это говорит, - найти UL, который является прямым потомком DIV

Answer 4

var result = $('#selector:first');