1

При работе с SVG столкнулся с проблемой: не находится элемент tspan в строке.

Например, этот код не выведет ничего. В чём проблема?

var subrows = "<tspan x='100' y='26.4'>​​ТЕст</tspan><tspan x='100' y='52.8'>И</tspan><tspan x='100' y='79.2'>Тест</tspan><tspan x='100' y='105.6'></tspan>";

$(subrows).find('tspan').each(function() {
    console.log($(this).attr("y"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2 ответа 2

2

.find() ищет только среди потомков. Так как в $(subrows) находятся только 4 <tspan> на верхнем уровне, и у каждого из которых нет потомков, то find среди отсутствующих потомков ничего найти и не сможет.

Для поиска среди потомков и самих элементов можно воспользоваться комбинацией из методов find и addBack:

var subrows = "<tspan x='100' y='26.4'>ТЕст<tspan y='internal_tspan_y'></tspan></tspan><tspan x='100' y='52.8'>И</tspan><tspan x='100' y='79.2'>Тест</tspan><tspan x='100' y='105.6'></tspan><p y='not_tspan_y'</p>";

$(subrows).find('tspan').addBack('tspan').each(function() {
    console.log($(this).attr("y"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Внутренний <tspan> и <p> в конце добавлены для демонстрации корректности результата.


Если потомки вообще не предполагаются, и нужно просто отфильтровать <tspan> элементы, то достаточно воспользоваться методом filter:

var subrows = "<tspan x='100' y='26.4'>ТЕст<</tspan><tspan x='100' y='52.8'>И</tspan><tspan x='100' y='79.2'>Тест</tspan><tspan x='100' y='105.6'></tspan><p y='not_tspan_y'</p>";

$(subrows).filter('tspan').each(function() {
    console.log($(this).attr("y"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1

Потому что $().find ищет среди подэлементов элементов в выборке

https://api.jquery.com/find/

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.