Расширение тега
 

Есть несколько тегов, например "<P>"
В каждом из них есть несколько тегов, например "<U>"
Кликнув по любому тегу "<U>", можно прочесть его "id":

<P id="A">
<U id="1" onClick="nomer(this)">A1</U>
<U id="2" onClick="nomer(this)">A2</U>
<U id="3" onClick="nomer(this)">A3</U>
</P>

<P id="B">
<U id="4" onClick="nomer(this)">B4</U>
<U id="5" onClick="nomer(this)">B5</U>
<U id="6" onClick="nomer(this)">B6</U>
</P>

<P id="C">
<U id="7" onClick="nomer(this)">C7</U>
<U id="8" onClick="nomer(this)">C8</U>
<U id="9" onClick="nomer(this)">C9</U>
</P>


<script>
function nomer(x){
y=x.getAttribute("id")
alert(y)}
</script>

Как можно изменить скрипт, чтобы кликнув по любому тегу "<U>", можно было бы прочесть "id" тега "<P>", его содержащего, или порядковый номер этого тега "<P>" в документе?
То есть, кликнув по надписи, "B5" получить в alert: "B".
Понятно, что в тег "<P>" нельзя ставить "onClick", иначе бы и не было вопроса!
Что то из этой темы когда то читал, кажется, про "расширение какого то контейнера", но это было давно, и сейчас даже не помню, какая это тема.

awas,

<P id="A">
<U id="1" onClick="alert(this.parentNode.id+this.id)">A1</U>
<U id="2" onClick="alert(this.parentNode.id+this.id)">A2</U>
<U id="3" onClick="alert(this.parentNode.id+this.id)">A3</U>
</P>

забыть про атрибут onclick, использовать делегирование событий и parentNode цели клика

Спасибо за "parentNode", не знал о таком!

Не могу разобраться, как с помощью полученного таким способом "id", обратиться к тегу. Например, если к моему примеру, из первого поста, добавить кнопку с обращением в явном виде:

<input type="button" value="Pusk" onClick="B.style.backgroundColor='red'">

то как написать аналог этого, с помощью полученного "id"? Что то такого вида:

<script>
function nomer(x){
y=x.parentNode.id
y.style.backgroundColor='red'}
</script>

(для моей задачи для тега "<P>" нужно выполнить "select")

P.S. "onClick" использую только для демонстрации вопроса.

это всё и портит ;)

при таком способе: запоминать id в глобальной переменной

Цитата: "запоминать id в глобальной переменной"
Это как? Ни один из нижеприведенных вариантов не работает:

<script>
var y=''
function nomer(x){
y=x.parentNode.id
y.style.backgroundColor='red'}
</script>

<script>
var y='B'
function nomer(x){
y.style.backgroundColor='red'}
</script>

<script>
var y=x.parentNode.id
function nomer(x){
y.style.backgroundColor='red'}
</script>

Хотя работает такой вариант:

<script>
function nomer(x){
B.style.backgroundColor='red'}
</script>

document.getElementById(y)

Да, такой вариант, работает:

<script>
function nomer(x){y=x.parentNode.id
document.getElementById(y).style.backgroundColor=' red'}
</script>

До получения вашего ответа, подбором нашёл ещё такой вариант:

<script>
function nomer(x){
x.parentNode.style.backgroundColor='red'}
</script>

И для моей задачи:

<script>
function nomer(x){
tr=document.selection.createRange()
tr.moveToElementText( x.parentNode )
tr.select()}
</script>

Спасибо за помощь!