Получить атрибуты HTML 5 кругов в Javascript

У меня есть несколько кругов html, которые добавляются к svg с использованием D3.js. Каждый круг не имеет ID или класс и выглядит, когда я проверить элементы в браузере:Получить атрибуты HTML 5 кругов в Javascript

<circle cx="50" cy="80" r="1" style="fill: rgb(255, 0, 0);"></circle>

Я хочу, чтобы получить значения cx и cy в яваскрипт переменных.

Я пытался что-то вроде:

var v = $('circle').value;

но как я могу ссылаться на атрибуты cx и cy?

Я пробовал var x_val = $('circle.cx').value;, но это не определено.

Также попробовал var x_val = $('circle').data('cx');, но это null.

источник

2014-11-24 brno792

element.value; получает значение обычного объекта JavaScript, а не объекта jquery.

$('circle').data('cx'); получает значение атрибута data-cx="" или значение выставиться ранее с помощью метода $('circle').data('cx', 'whatever');

Для извлечения значения cx и cy, использование:

var x_val = $('circle').attr('cx'); 
var y_val = $('circle').attr('cy');

ОБНОВЛЕНИЕ:

итерировать на несколько кругов:

var x_val, y_val; 
$circleArray = $('circle'); //get all circles 

$circleArray.each(function(idx, el){//go through each circle 

    x_val = $(el).attr('cx');//get cx 
    y_val = $(el).attr('cy');//get cy 

    $('#result').append(idx+': '+x_val+'/'+y_val);//here: print the values, but replace this with whatever you need 
});

http://jsfiddle.net/pu2cnLgk/1/

источник

2014-11-24 06:28:13 ylerjen

Спасибо. Хотя я получаю «неопределенный», когда я пытаюсь это сделать. У меня несколько кругов, и ни один из них не имеет идентификатора или класса.Именно поэтому я становлюсь «неопределенным»? Как следует перебирать их? – brno792

Отсутствие недостатка Id или класса не является проблемой. Вы можете получить это значение без id и class, потому что $ ('circle') выберет весь элемент 'circle' на странице. Используйте класс или идентификатор, если хотите уточнить, какой круг вы хотите извлечь. Я обновил свой ответ в соответствии с вашими изменениями. метод .attr() работает хорошо, взгляните на скрипку. – ylerjen

Я должен упомянуть, что круги, добавленные с помощью D3.js. Я попробовал ваше решение, но ничего не получаю в .each(), console.log() даже ничего не печатает. Когда я печатаю circleArray, я вижу [prevObject: x.fn.x.init [1], контекст: документ, селектор: «круг», jquery: «1.10.2», конструктор: функция ...] – brno792

Это легко сделать без использования JQuery, особенно если ваш круг имеет идентификатор.

<circle id='awesomeCircle' cx="50" cy="80" r="1" style="fill: rgb(255, 0, 0);"></circle>

И yuor Javascript код:

var x = document.getElementById('awesomeCircle').getAttribute('cx'); 
var y = document.getElementById('awesomeCircle').getAttribute('cy');

Если вы не готовы присвоить идентификатор элемента, вы можете использовать

var x = document.getElementsByTagName('circle')[0].getAttribute('cx'); 
var y = document.getElementsByTagName('awesomeCircle')[0].getAttribute('cy');

Это повлияет и совместимость браузера отрицательно, хотя.

источник

2014-11-24 06:36:54

$ ('circle') предоставит вам объект jQuery. Следовательно

$('circle').value //undefined

как нет значения переменной или метода в jQuery.

Как Есть много кругов вы можете сделать, как этот

$('circle').each(function(index,elem){ 
 
    
 
    alert("cx :"+elem.getAttribute("cx")+"...cy :"+elem.getAttribute("cy")); //using JavaScript 
 

 
    console.log("cx :"+$(elem).attr("cx")+"...cy :"+$(elem).attr("cy")); // using jQuery 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<circle cy="10" cx="210"></circle> 
 
<circle cy="30" cx="210"></circle> 
 
<circle cy="20" cx="201"></circle> 
 
<circle cy="10" cx="210"></circle>

источник

2014-11-24 06:56:35

Получить атрибуты HTML 5 кругов в Javascript

ответ

Смежные вопросы