Как найти имя класса элемента внутри кнопки? - PullRequest
Новая
       3

Как найти имя класса элемента внутри кнопки?

0 голосов
/ 27 февраля 2020

У меня есть кнопка HTML со значком FontAwesome внутри 

    <button id='vabs'><i class="fa fa-eye"></i> <span>Show</span></button>

Я пытаюсь получить имя класса тега i внутри button (fa-eye) с помощью 

     $('#vabs').click(function() {
   alert(this.children.className);});

Это дает неопределенное значение. Как мне этого добиться?

Ответы [ 2 ]

2 голосов
/ 27 февраля 2020

Очевидно, что есть и другие способы сделать это, но вот 2 из них:

  1. Используйте childNodes[0], чтобы получить первого потомка #vabs

$("#vabs").on("click", function() {  
  let className = this.childNodes[0].className
  console.log(className)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='vabs'><i class="fa fa-eye"></i> <span>Show</span></button>
Используйте только jQuery 

$("#vabs").on("click", function() {  
  let className = $(this).find("i").attr("class")
  console.log(className)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='vabs'><i class="fa fa-eye"></i> <span>Show</span></button>
1 голос
/ 27 февраля 2020

Вы можете сделать что-то вроде этого, $(this).children().attr('class'), чтобы получить значение класса атрибута, затем использовать функцию split(): 

$('#vabs').click(function() {
   let classList = $(this).children().attr('class').split(" ");
   let classAttr = $(this).children().attr('class');
   console.log(classList);
   console.log(classAttr);
});
<button id='vabs'><i class="fa fa-eye"></i> <span>Show</span></button>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
...