-2

I need to get tag names, classes and their IDs from the elements with jQuery.

Please look at this code:

var allElm = document.querySelectorAll(".frame *");

allElm.forEach((elm) => {
  elm.addEventListener("mouseover", function () {
    this.style = "border: 1px solid #7bc4ff;";

    var s = jQuery(this).prop("tagName");

    jQuery(".elm-info").html(`<div class="elm-info">${s}</div>`);

    console.log(s);
  });
});

Enter image description here

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Oss_vahid
  • 11
  • 4
  • 2
    Why? Once you have the element, plain JS works just fine? What's wrong with just checking `elm.tagName`, `elm.classList` and `elm.id`? – Mike 'Pomax' Kamermans Mar 27 '23 at 03:39
  • @Mike'Pomax'Kamermans i need get current tag name please look this image to understand [this image](https://i.stack.imgur.com/4XPff.png) – Oss_vahid Mar 27 '23 at 03:47
  • @Mike'Pomax'Kamermans – Oss_vahid Mar 27 '23 at 03:56
  • 1
    Use words [not images](/help/how-to-ask). But as I already mentioned: just use plain JS for that? What part of my first comment doesn't get you the things you need? Once you have an element, all three of the things you need are _already_ plain properties that don't require jQuery at all. – Mike 'Pomax' Kamermans Mar 27 '23 at 03:59
  • All parts work, but it does not return the name of the current tag. For example, when I move the mouse over the image tag, it returns the div tag. I want it to return the name of the current tag. I don't know why it doesn't work @Mike'Pomax'Kamermans – Oss_vahid Mar 27 '23 at 04:04
  • The problem was the incorrect use of the event... **mouseenter** works fine @Phil – Oss_vahid Mar 27 '23 at 04:20

1 Answers1

0

You can use console.log(this) to check the key of tagName, id, className...

$('.frame *').on('mouseenter', function() {
  console.log(this.tagName, this.className, this.id)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="frame">
    <div class="1 class1" id="2_id">1</div>
    <section class="2 class2" id="2_id">2</section>
</div>
Shuo
  • 1,512
  • 1
  • 3
  • 13
  • Thank you very much. My problem was solved with your help. The problem was the incorrect use of the event... **mouseenter** works fine @shuo – Oss_vahid Mar 27 '23 at 04:13