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

Question

[Di -]

Мы знаем, что блоку можно задать идентификатор: <div id="myid"></div>. А можем задать класс: <div class="myclass"></div>.

Затем, чтобы в jQuery обратиться к этому блоку мы используем: $("#myid") или $(".myclass"), соответственно.

А как быть, если я хочу задать идентификатор со своим названием, ну например: <div material_id="myid></div>. Как в таком случае обращаться к блоку из jQuery?

И сразу второй вопрос.

Допустим, что мы имеем:

<div material_id="1">
  <div class="tba active">Text</div>
</div>
<div material_id="2">
  <div class="tba">Text</div>
</div>

Я хочу обработать событие при нажатии на Text вот таким образом:

$(function() {
    $(".tba").click(function() {
        $(".tba").removeClass("active");         
        $(this).toggleClass("active");
    })
});

Теперь самое важное. Как мне понять внутри какого material_id был нажат блок с классом tba?

Comments

[lega]

как вариант: https://jsfiddle.net/6Lrdc9n9/

Answer 1

[Сергей Горячев]

Используйте data-атрибуты.

<div id="myid" data-material_id="1"></div>
<script>
$("#myid").data('material_id');
</script>

А с такими "классами" Вас валидаторы запинают)

Answer 2

[Rsa97]

<div data-material_id="1">
$(this).parent().data("material_id");