find включая self со сложным селектором
Всем доброго времени суток!
Воткнулся в тупик, не могу решить, как лучше сделать. Есть произвольный jquery-селектор, хранящийся в переменной. В документ добавляется некий объект. В этом объекте (контексте) надо найти все элементы, удовлетворяющие селектору, включая сам объект. Иными словами, нужен метод, такой же как find, только включающий в зону поиска исходный объект (контекст), а не только его дочерние элементы. Поиск по интернету дал такое решение: var target = $(context).find(selector).addBack(selector); Но оно не работает для сложных селекторов. Например, если selector = "#container a";а context вот такой: <div id="container"><a href="">link</a></div> то решение не сработает, на выходе будет пусто. Почему - понять не сложно. find ищет только среди дочерних к context элементов, а addBack берет исходный элемент (context) и фильтрует по селектору, не залезая вглубь дерева. Как элегантно решить - не могу сообразить :-? Структуру документа менять нельзя (т.е. обернуть context в дополнительный div не катит). Взять родительский элемент - тоже, т.к. а) его может не быть, если context = document; б) можно найти лишнее, не относящееся к context. Помогите, плз. Вроде простая задача, а простого решения не вижу |
Цитата:
|
kazanova84,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var context = "#container", selector = "a"; var target = $(selector,context).addBack(); alert($.map(target,function(el) { return el.tagName })); }); </script> </head> <body> <div id="container"><a href="">link</a></div> </body> </html> |
Цитата:
|
рони,
Селектор хранится в переменной, и что он из себя представляет - нам не известно. Обработать мы его можем, но вот так легко "располовинить" - нет. |
Цитата:
нет id в id в первом сообщении. Цитата:
|
:write: ... но выход найдётся
|
kazanova84,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var context = "#context", selector = "table a"; var target = $(selector).filter(function(i,el) { return $(context).find(el).length }).add(context); alert($.map(target,function(el) { return el.tagName })); }); </script> </head> <body> <div id="body"> <table id="context"> <tr> <td><a>target</a></td> </tr> </table> </div> <div id="body"> <table id="test"> <tr> <td><a>target</a></td> </tr> </table> </div> </body> </html> |
kazanova84,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var context = "#container", selector = "#container a"; var target = $(selector).filter(function(i,el) { return $(context).has(el).length }).add(context); alert($.map(target,function(el) { return el.tagName })); }); </script> </head> <body> <div id="container"><a href="">link</a></div> <div id="test"><a href="">link</a></div> </body> </html> |
|
Белый шум,
твой вариант короче :) |
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
kazanova84,
более пас, вашу логику не осилил, всё что мог выше. |
kazanova84,
ну так уберите .addBack() в конце... Не? |
Цитата:
Немного переформулировал задачу и решил сам :) Другими словами, постановка звучит так: найти по селектору элементы документа, которые являются самим контекстом или его дочерними элементами. Решил так var $context = $('#context'); var selector = 'table a'; var res = $(selector).filter(function() { return $context.is(this) || ($context.has(this).length > 0); }); Единственный минус - то, что поиск идет вначале по всему документу, а потом применяется фильтр по контексту. Хорошо бы начинать поиск с контекста. Но тут нюанс: селектор описывает элемент в иерархии документа, а не контекста. Всем спасибо за участие! :thanks: |
Цитата:
Цитата:
ADD: чтобы не искать по всему документу, можно так: $context.parent().find(selector).filter(function() { return $context.is(this) || ($context.has(this).length > 0); }); ADD2: а, у вас же и документ может быть контекстом. Забыл. |
А не скажите, в какой ситуации это может понадобиться?
|
Nexus,
Селекторы ссылаются на элементы, которые нужно неким образом обработать. Когда на страницу вставляется новый контент (ajax) надо этот контент обработать селекторами. Можно, конечно, и классы к обработанным цеплять, но это не очень удобно в контексте кода |
kazanova84, я в данный момент болею, температура, все дела... может быть в этом причина...
Ничего не понял. Что значит "селекторы ссылаются на элементы"? Что значит "обработать контент селекторами"? Что значит "не очень удобно в контексте кода"? |
Часовой пояс GMT +3, время: 02:12. |