jQuery получить все элементы внутри SVG с указанным идентификатором

Question

Я использую this jQuery plugin для загрузки SVG-изображения в div. Я хотел бы получить все идентификаторы элементов из XML-данных SVG, которые содержат атрибут идентификатора. Например, в моем SVG-изображении у меня есть circle и polygon элементы с атрибутами ID, но элемент rect без атрибута идентификатора. Я хочу получить эти два с идентификаторами из XML.

Как это сделать?

Я пробовал это в методе onLoadsvg.

$("#image svg").each(function() { 
    $("#list").append("<option>" + this.id + "</option>"); 
}); 

#image является контейнером для svg элемента и #listselect является метка.

Answer 1

Предполагая, что SVG добавлен на странице должным образом, вы можете использовать "has attribute selector", чтобы выбрать все элементы с ID:

$("#imag > svg [id]").each(function() { 
    $("#list").append("<option>" + this.id + "</option>"); 
}); 

Answer 2

Уверена, что он не работает?

Я создал fiddle с кодом

$("#image svg").each(function() { 
    $("#list").append("<option>" + this.id + "</option>"); 
});  

и это выглядит хорошо для меня.

Edit: Заменить вторую строку с этим:

$("#list").append("<option style='display:" + ((this.id.length>0)?'inline':'none') + ";'>" + this.id + "</option>"); 

, чтобы показать только те, с ID. Или просто поместите чек (длина> 0 или что-то еще) перед добавлением тега опции (который, вероятно, будет легче понять/изменить позже, я просто хотел бы использовать тройные операторы: p)