Почему не срабатывает find

354
27 июня 2017, 23:29

При работе с 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>

Answer 1

.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>

Answer 2

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

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

READ ALSO
jQuery &gt;как скрыть первый элемент с динамически формирующимеся последующими
jQuery

jQuery >как скрыть первый элемент с динамически формирующимеся последующими

Принцип работы: используется компонент Fabrik на Joomla, в форме есть кнопки + / - для добавления точно такой же формыТребуется чтоб изначально был...

 339
$.get не работает, хотя .load отрабатывает
jQuery

$.get не работает, хотя .load отрабатывает

Был у меня такой код:

 336
Нахождение использование стилей
CSS

Нахождение использование стилей

Можно ли как то определить используются ли подключенные css стили где то, на данной страницеДопустим подключено 5 css файлов , как допустим, узнать...

 267
Как спроектировать бд для чатов?
Java

Как спроектировать бд для чатов?

ЗдравствуйтеИмеется простейший чат на двоих человек

 355