Получить самые верхние потомки потомков в jQuery

Question

С page=$("#page") Я хочу получить все указанные SVG, но не последующие внутренние.

<div id="page">
    <div ...>
        <svg> /* THIS ONE */
            <rect ...>
            <circle ...>
            <svg> /* NOT THIS ONE */
                <foo> ... </foo>
            </svg>
        </svg>
    </div>
    <div ...>
        <div ...>
            <svg> /* THIS ONE */
                <rect ...>
                <circle ...>
                <svg> /* NOT THIS ONE */
                    <foo> ... </foo>
                </svg>
            </svg>
        </div>
   </div>
</div>

РЕДАКТИРОВАТЬ Я обновил разметку, чтобы четко указать, что я имею в виду.

Одним из решений является использование :not(svg svg), которое я считаю уродливым и тяжелым.

Answer 1

После обновленного вопроса

Единственными решениями являются

$('#page svg:not(:has(svg))');

и ваши

$('#page svg:not(svg svg)');

Производительность (проверить тест ) они примерно одинаковы без явного победителя

---

оригинальный ответ

Для конкретного примера

$('#page > svg:first')

или

$('#page svg:first')

будет достаточно.

---

Но рассмотрим следующий случай

<div id="page">
   <div>
     <p>
        <svg id="svg-1"></svg>
     </p>
     <svg id="svg-2"></svg>
   </div>
</div>

Возможен ли этот случай ( оба svgs обернутыв другом )?и если да, то хотите ли вы #svg-2?

Этот случай вообще не обрабатывается версией >, а версия $('#page svg:first') вернет #svg-1

Answer 2

Если вы знаете, что у него всегда будет родитель <div>, вы можете сделать это (чтобы избежать необходимости знать, сколько элементов находится между #page и div):

#page div>svg

Answer 3

Вы можете использовать следующее:

$(page).children(svg).first()

, которое даст вам первый svg, в данном случае самый внешний, но может также быть слишком тяжелым, если это является частью вашей проблемы.1004 *

Answer 4

Просто получите первый дочерний уровень с >.

#page > svg