Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Как узнать ID элемента?


Автор: Wowa 14.7.2004, 02:33
Хотелось бы понять, как можно получить ID от td, т.е. button1 при клике на ссылку.
Код

<td id="button1"><a href="..." onClick="ВОТ ТУТ НАДО ЧТО-ТО ВСТАВИТЬ"></a></td>


Автор: <Spawn> 14.7.2004, 04:57
Например так:

Код
 <td id="button1"><a href="..." onClick="alert(document.all.button1.id);">Anchor</a></td>


или так:
Код
 <td id="button1"><a href="..." onClick="alert(document.getElementById('button1').id);">Anchor</a></td>


или так:
Код
 <td id="button1"><a href="..." onClick="alert(document.all['button1'].id);">Anchor</a></td>


или так:
Код
 <td id="button1"><a href="..." onClick="alert(this.parentElement.id);">Anchor</a></td>

Автор: Се ля ви 14.7.2004, 08:08
Добавлю от себя, что вместо конструкции
Код
alert({Какой-то объект}.id);
лучше использовать
Код
alert({Какой-то объект}.getAttribute('id'));
, это более правильно. Тогда будет работать не только в IE, но и в остальных браузерах, поддерживающих DOM level 1. :-)

Автор: Wowa 14.7.2004, 14:58
<Spawn>
первый три варианта не подходят, т.к. этот самый button1 мне и надо узнать.
Это может быть и button2 и button3 и т.п.

Автор: Юрик 14.7.2004, 15:25
A что тебе мешает сделать немного подругому:
Код

<td id='button1' onclick="alert(this.id)"><a href="#">Test</a></td>


Или так:

Код
<td id='button1'><a href="#" onclick="alert(offsetParent.id)">Test</a></td>


Или я чего не понимаю? smile.gif

Автор: Wowa 14.7.2004, 15:30
Цитата
<td id='button1' onclick="alert(this.id)"><a href="#">Test</a></td>

это не работает.

я сделал сейчас через:
Цитата
this.parentElement.getAttribute('id')


Теперь все в порядке. Всем спасибо.


Автор: Юрик 14.7.2004, 15:32
Можно и так, второй вариант точно рабочий!

Автор: mix 14.7.2004, 18:30
Я бы сделал так
Код

this.parentNode.id


Автор: iddqd 14.5.2008, 16:00
Извините, что пишу в столько старой теме, но моя проблема практически идентична.
Код

<p class="user_m" id="text" onclick="showinfo()">Какой-то текст</p>

Теперь пытаюсь внутри showinfo() получить тот id, который был у элемента.
Код

this.getAttribute('id')

Но, не работает. Пожалуйста, подскажите, как это можно реализовать?

Автор: Ghirik 14.5.2008, 16:19
Если обработчик задается в атрибутах тэга, то и this  и event следует передавать обработчику явным образом.

Код

<p class="user_m" id="text" onclick="showinfo(this)">Какой-то текст</p>


И брать внутри:

Код

function showinfo(obj) {
        obj.getAttribute('id');
}

или
Код

function showinfo(obj) {
        obj.id;
}

Автор: iddqd 14.5.2008, 16:40
Ghirik, спасибо. ++

Автор: iddqd 14.5.2008, 20:18
Теперь ИЕ меня мучает ошибкой: предпологается наличие объекта и на странице не работают совершенно никакие скрипты, однако в FF и Opera все великолепно. Может ли это быть связано с такой передачей this?

Автор: Grig 15.5.2008, 09:49
не, всё должно работать.
Покажь код?

Автор: iddqd 15.5.2008, 10:02
Код

<a href="#" class="user_m" id="text" onclick="showinfo(this)">Some Text</a>


Код

<script type="text/javascript" language="javascript">
     //$(document).ready(function(){
        //alert($.browser.msie); — это все комментарий, потому-что IE  в принципе не обрабатывает этот код. Почему?
    // });
    

    function showinfo(obj)
    {
        $('#info').text('');
        $('#info').append("<img alt='' src='loader.gif' />");
        
        $('#info').fadeOut('slow',
            function()
            {
                //$('#info').slideUp('slow',
                    //function()
                    //{
                        $('#info').load(obj.id+'.php',
                            function()
                            {
                                $('#info').fadeIn('slow',
                                    function()
                                    {
                                        //$('#info').slideDown('slow');    
                                    }
                                );
                            }
                        );
                    //}
                //);
            }
        );
        
        
    $('a.user_m_selected').attr({class:"user_m"});
    $('a.user_w_selected').attr({class:"user_w"});
    $(obj).attr({class:obj.className + "_selected"});
    }
</script>

Автор: Grig 15.5.2008, 10:26
как я понял ошибка вылетает на 18-й строке?
Код

$('#info').load(obj.id+'.php',

что за фреймворк у тебя подключен?
А что если просто передавать id?
Код

    
<a href="#" class="user_m" id="text" onclick="showinfo(this.id)">Some Text</a>

Автор: iddqd 15.5.2008, 10:29
Подключен jQuery. А ошибка именно тут
Код

<a href="#" class="user_m" id="text" onclick="showinfo(this)">Some Text</a>



Цитата(Grig @  15.5.2008,  10:26 Найти цитируемый пост)
А что если просто передавать id?

Не помогло. Результат тот же.

Автор: Grig 15.5.2008, 10:37
Интересное кино.
У объекта А(ссылки) на this передается сама ссылка, а не объект. Это странно.

а this.id все равно работает. Во всех браузерах.

Добавлено через 1 минуту и 12 секунд
Код

<a href="#" class="user_m" id="text" onclick="alert(this.id)">Some Text</a>

Автор: iddqd 15.5.2008, 10:50
Да, действительно интересно.
Даже прикинуть не могу в чем дело. Поменял на alert и он выводится.
Может Вам стоит взглянуть на код всей страницы?
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Титл</title>>
</head>

<body>
<script type="text/javascript" language="javascript">
     //$(document).ready(function(){
        //alert($.browser.msie);
    // });
    

    function showInfo(obj)
    {
        $('#info').text('');
        $('#info').append("<img alt='' src='loader.gif' />");
        
        $('#info').fadeOut('slow',
            function()
            {
                //$('#info').slideUp('slow',
                    //function()
                    //{
                        $('#info').load(obj+'.php',
                            function()
                            {
                                $('#info').fadeIn('slow',
                                    function()
                                    {
                                        //$('#info').slideDown('slow');    
                                    }
                                );
                            }
                        );
                    //}
                //);
            }
        );
        
        
    $('a.user_m_selected').attr({class:"user_m"});
    $('a.user_w_selected').attr({class:"user_w"});
    $(obj).attr({class:obj.className + "_selected"});
    }
</script>

<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this.id)">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this.id)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this.id)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>



Добавлено через 12 минут и 45 секунд
Совсем я что-то с утра плохо соображаю. Ведь у меня в последней строке js используется именно объект.
Вот, вот так даже переделал:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>титл</title>
</head>

<body>
<script type="text/javascript" language="javascript">
    function showInfo(obj)
    {    
        $('#info').load(obj.id+'.php');
        
        
        $('a.user_m_selected').attr({class:"user_m"});
        $('a.user_w_selected').attr({class:"user_w"});
        $(obj).attr({class:obj.className + "_selected"});
    }
</script>

<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this)">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>


Автор: Grig 15.5.2008, 11:07
ошибка в этих строчках:
Код

    $('a.user_m_selected').attr({class:"user_m"});
    $('a.user_w_selected').attr({class:"user_w"});
    $(obj).attr({class:obj.className + "_selected"});


Закомментируй их все заработает.
я в jquery не силен, ты что ими сделать хочешь?

Автор: iddqd 15.5.2008, 11:20
Спасибо, в лисе и ИЕ все заработало, но в Опере перестало smile
Хочу, чтоб при нажатии на имя человека оно оставалась нажатым. Т.е. класс элемента меняется на текущийкласс_selected.
Имен класса всего 2: user_m и user_w для мужчины и для женщины соответсвенно. Там цвета выделения разные.

Автор: Grig 15.5.2008, 11:27
Код

var obj1=document.getElementById(obj);
obj1.className+="_selected";

Ы?

Автор: iddqd 15.5.2008, 11:34
Эти строки сначала все выделенные делали не выделенными:
Код

    $('a.user_m_selected').attr({class:"user_m"});
    $('a.user_w_selected').attr({class:"user_w"});

И не работают они в ИЕ потому-что если ничего не выделенно, то $('a.user_m_selected') не существует, а я пытаюсь им манипулировать.Пытаюсь сделать проверки, но все-равно ошибку ИЕ выдает.
А еще по какой-то необъяснимой причине в Опере октазывается работать 9.27. Есть какие-нибудь предположения у Вас?

Автор: Grig 15.5.2008, 11:43
Код

$('a.user_m_selected').className="user_m"; 
$('a.user_w_selected').className="user_w"; 

var obj1=document.getElementById(obj);
obj1.className+="_selected"; 


Добавлено через 42 секунды
полностью работающий код:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Титл</title>>
</head>
<body>
<script type="text/javascript" language="javascript">
     //$(document).ready(function(){
        //alert($.browser.msie);
    // });
    
    function showInfo(obj)
    {
        $('#info').text('');
        $('#info').append("<img alt='' src='loader.gif' />");
        
        $('#info').fadeOut('slow',
            function()
            {
                //$('#info').slideUp('slow',
                    //function()
                    //{
                        $('#info').load(obj+'.php',
                            function()
                            {
                                $('#info').fadeIn('slow',
                                    function()
                                    {
                                        //$('#info').slideDown('slow');    
                                    }
                                );
                            }
                        );
                    //}
                //);
            }
        );

$('a.user_m_selected').className="user_m"; 
$('a.user_w_selected').className="user_w"; 
var obj1=document.getElementById(obj);
obj1.className+="_selected";  
 
    }
</script>
<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this.id)">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this.id)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this.id)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>


Добавлено через 2 минуты и 20 секунд
а библиотечка хорошая, надо бы покопать =)

Автор: iddqd 15.5.2008, 11:52
Библиотека шикарная, но код не работает smile
Код

        $('a.user_m_selected').className="user_m"; 
        $('a.user_w_selected').className="user_w";

Этот код не сбрасывает имя класса.

Автор: Grig 15.5.2008, 12:11
если все правильно понял, то вот:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Титл</title>
    <style>
    .user_m{
        color:green;
    }
    .user_w{
        color:red;
    }
    .user_m_selected{
        color:yellow;
    }
    .user_w_selected{
        color:orange;
    }
    </style>    
</head>
<body>
<script type="text/javascript" language="javascript">
     //$(document).ready(function(){
        //alert($.browser.msie);
    // });
    
    function showInfo(obj)
    {
     var obj1=document.getElementById(obj);
     
        $('#info').text('');
        $('#info').append("<img alt='' src='loader.gif' />");
        
        $('#info').fadeOut('slow',
            function()
            {
                //$('#info').slideUp('slow',
                    //function()
                    //{
                        $('#info').load(obj+'.php',
                            function()
                            {
                                $('#info').fadeIn('slow',
                                    function()
                                    {
                                        //$('#info').slideDown('slow');    
                                    obj1.className=obj1.className.replace("_selected", "");    
                                    }
                                );
                            }
                        );
                    //}
                //);
            }
        );


obj1.className+="_selected";  
 
    }
    
</script>
<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this.id);">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this.id)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this.id)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>

Автор: iddqd 15.5.2008, 12:20
Выделяется по-прежнему, но при нажатии на другое имя прошлое выделение не пропадает.

Автор: Grig 15.5.2008, 12:30
ну теперь наверное все =)
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Титл</title>
    <style>
    .user_m{
        color:green;
    }
    .user_w{
        color:red;
    }
    .user_m_selected{
        color:yellow;
    }
    .user_w_selected{
        color:orange;
    }
    </style>    
</head>
<body>
<script type="text/javascript" language="javascript">
     //$(document).ready(function(){
        //alert($.browser.msie);
    // });
    
    function showInfo(obj)
    {
     var a_href=document.getElementsByTagName("A");

     for (var i=0;i<a_href.length;i++){
         a_href[i].className=a_href[i].className.replace("_selected", "");
        }
     var obj1=document.getElementById(obj);
     
        $('#info').text('');
        $('#info').append("<img alt='' src='loader.gif' />");
        
        $('#info').fadeOut('slow',
            function()
            {
                //$('#info').slideUp('slow',
                    //function()
                    //{
                        $('#info').load(obj+'.php',
                            function()
                            {
                                $('#info').fadeIn('slow',
                                    function()
                                    {
                                        //$('#info').slideDown('slow');    
                                    //obj1.className=obj1.className.replace("_selected", "");    
                                    }
                                );
                            }
                        );
                    //}
                //);
            }
        );

obj1.className+="_selected";  
 
    }
    
</script>
<div id="logo"></div>
<a href="#" class="user_m" id="oleg" onclick="showInfo(this.id);">Олег</a>
<a href="#" class="user_w" id="valentina" onclick="showInfo(this.id)">Валентина</a>
<a href="#" class="user_w" id="julia" onclick="showInfo(this.id)">Юлия</a>
<div class="hr" style="margin-top:15px;"></div>
<div id="info">Нажмите на имя человека для получения информации, если она вам конечно нужна.</div>
<div class="hr"></div>
</body>
</html>

Автор: ksnk 15.5.2008, 17:18
iddqd, Для работы с классом в jQuery применяют функции addClass, hasClass, removeClass и toggleClass. 

Автор: iddqd 15.5.2008, 20:06
Grig, дада. Спасибо огромное ++

Добавлено через 1 минуту и 32 секунды
ksnk, но как это можно применить в моем случае?
Получить массив всех элементов a и в цикле проверить (if($obj).hasClass(.class))? 
Или можно сделать как-то изящней?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)