Можно ли создавать пользовательские селектора jQuery, которые перемещаются по предкам? например a: ближайший или: родительский селектор

Ответ 1

Основываясь на многочисленных комментариях и одном подробном объяснении того, почему это невозможно, мне пришло в голову, что цель, которую я хочу, может быть встречена с помощью $(document).find(), но с некоторой концепцией целевых элементов. То есть, какой-то способ нацеливать исходные элементы запроса внутри селектора.

С этой целью я придумал следующий селектор :this, который работает так (без каламбура):

// Find all labels under .level3 classes that have the .starthere class beneath them
$('.starthere').findThis('.level3:has(:this) .label')

Это позволяет нам эффективно искать DOM, затем вниз в соседние ветки в одной строке селектора!, то есть он выполняет ту же работу (но в одном селекторе):

$('.starthere').parents('.level3').find('.label')

Шаги:

1 - Добавить новый метод jQuery.findThis

2 - Если селектор имеет :this, замените поиск и поиск по идентификатору из document вместо

3 - Если селектор не содержит процесс :this, обычно используя оригинальный find

4 - Протестируйте с помощью селектора типа $('.target').find('.ancestor:has(:this) .label'), чтобы выбрать метку внутри предка (-ов) целевого элемента (ов)

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

JSFiddle: http://jsfiddle.net/TrueBlueAussie/z3vwk1ko/36/

// Add findThis method to jQuery (with a custom :this check)
jQuery.fn.findThis = function (selector) {
    // If we have a :this selector
    if (selector.indexOf(':this') > 0) {
        var ret = $();
        for (var i = 0; i < this.length; i++) {
            var el = this[i];
            var id = el.id;
            // If not id already, put in a temp (unique) id
            el.id = 'id'+ new Date().getTime();
            var selector2 = selector.replace(':this', '#' + el.id);
            ret = ret.add(jQuery(selector2, document));
            // restore any original id
            el.id = id;
        }
        ret.selector = selector;
        return ret;
    }
    // do a normal find instead
    return this.find(selector);
}

// Test case
$(function () {
    $('.starthere').findThis('.level3:has(:this) .label').css({
        color: 'red'
    });
});

Известные проблемы:

• Это оставляет пустой атрибут id для целевых элементов, у которых не было атрибута id, чтобы начать (это не вызывает никаких проблем, но не так аккуратно, как хотелось бы)

• Из-за того, как он должен искать из документа, он может только эмулировать parents(), а не closest(), но у меня есть чувство, что я могу использовать подобный подход и добавить псевдо-селектор :closest() этот код.

Первая версия ниже:

1 - Сохранить метод jQuery find для справки

2 - замените новый метод jQuery.find

3 - Если селектор имеет :this, замените поиск и поиск по идентификатору из document вместо

4 - Если селектор не содержит процесс :this, обычно используя оригинал find

5 - Протестируйте с помощью селектора типа $('.target').find('.ancestor:has(:this)'), чтобы выбрать предка целевых элементов

JSFiddle: http://jsfiddle.net/TrueBlueAussie/z3vwk1ko/24/

// Save the original jQuery find we are replacing
jQuery.fn.findorig = jQuery.fn.find

// Replace jQuery find with a custom :this hook
jQuery.fn.find = function (selector) {
    // If we have a :this selector
    if (selector.indexOf(':this') > 0) {
        var self = this;
        var ret = $();
        for (var i = 0; i < this.length; i++) {
            // Save any existing id on the targetted element
            var id = self[i].id;
            if (!id) {
                // If not id already, put in a temp (unique) one
                self[i].id = 'findme123';
            }
            var selector2 = selector.replace(':this', '#findme123');
            ret = ret.add(jQuery(selector2, document));
            // restore any original id
            self[i].id = id;
        }
        ret.selector = selector;
        return ret;
    }
    return this.findorig(selector);
}

// Test case
$(function () {
   $('.starthere').find('.level3:has(:this)').css({
        color: 'red'
    });
});

Это основано на 6-часовом рабстве над исходным кодом jQuery/Sizzle, поэтому будьте осторожны. Всегда рады услышать о способах улучшения этой замены find, поскольку я новичок в внутренних функциях jQuery:)

Теперь это означает, что я могу решить начальную проблему, как сделать пример оригинальной метки:

options.selector = ".form-group:has(:this) .label";

$('input').click(function(){
    var label = $(this).find(options.selector);
});

например. http://jsfiddle.net/TrueBlueAussie/z3vwk1ko/25/

Ответ 2

Невозможно, и я расскажу, почему

Чтобы создать настраиваемый селектор, вам нужно что-то вроде этого:

jQuery.extend(jQuery.expr[':'], {
  focusable: function (el, index, selector) {
    return $(el).is('a, button, :input[type!=hidden], [tabindex]');
  };
})

Логика выбора позволяет вам выбрать подмножество элементов из текущего выбора, например, если $( "div" ) выбрать ВСЕ разделы на странице, то следующие два примера будут выберите все divs без элементов:

$("div:empty")
$("div").filter(":empty")

В соответствии с тем, как jQuery позволяет писать пользовательские селектор, нет способа вернуть элементы вне исходного набора, вы можете выбрать только true или false для каждого элемента набора, когда его спросят. Например, селектор ": contains" реализован таким образом в версии 2.1.1 jQuery:

function ( text ) {
        return function( elem ) {
            return ( elem.textContent || elem.innerText || getText( elem ) ).indexOf( text ) > -1;
        };
}

Но... (Возможно, вы хотите сначала просмотреть последнее редактирование) Возможно, вы найдете полезный селектор всех предков данного элемента, например, представьте этот сценарий:

<element1>
  <div>
    <span id="myelementid"></span>
  </div>
  <div>
    <p>Lorem ipsum sir amet dolor... </p>
  </div>
</element1>
<element2>
</element2>

И вам нужно что-то, связанное с родителем div myelementid, element1 и всеми предками и т.д., вы можете использовать селектор "has", таким образом:

$("*:has('#myelementid')")

Первый селектор вернет ВСЕ элементы, отфильтрованные "has", вернет все элементы, имеющие #myelementid как descendent, ergo, all предки из #myelementid. Если вас беспокоит производительность (и, возможно, вам стоит), вам нужно заменить "*" на что-то более конкретное, возможно, вы ищете div

$("div:has('#myelementid')")

Или для данного класса

$(".agivenclass:has('#myelementid')")

Я надеюсь, что это поможет

ИЗМЕНИТЬ

Вы можете использовать селектор parent() для jQuery, поскольку он возвращает ВСЕ предков элемента, даже включая корневой элемент документа (т.е. тег html), таким образом:

$('#myelementid').parents()

Если вы хотите отфильтровать определенные элементы (например, div), вы можете использовать это:

$('#myelementid').parents(null, "div")

Или это:

$('#myelementid').parents().filter("div")