Get post ID with Javascript

Asked

Viewed 210 times

0

I need to get the id of the HTML tag generated dynamically by Wordpress.

Wordpress has the option to add the post ID in the HTML tag so: article id

How do I get the ID inside the tag <article> with Javascript, where it is not fixed?

javascript

  • you want to get the id attribute value or the element with id 72?

  • I think you can take it this way: const element = Document.getElementById('Representatives-list'). Children[0];

  • getElementById obtains only the elements with id specified in that case representatives-list is a class and not an ID, so you can use document.querySelectorAll('.type-representantes')[0]

  • Out of curiosity, how does PHP generate this page? It is not easier to use the function get_the_ID() to get the post id?

4 answers

4

To get a list of all the Ids of the elements that have class that starts with post-, just do something like this:

const postIds = Array.from(
  document.querySelectorAll('article[class*="post-"]')
).map((el) => el.id);

console.log(postIds);
<article id="1" class="post-1"></article>
<article id="2" class="post-2"></article>
<article id="3" class="post-3"></article>
<article id="4" class="post-4"></article>
<article id="5" class="post-5"></article>

Note that if you can ensure that the class post- always come first, you can change the selector article[class*="post-"] for article[class^="post-"] to have a small gain in performance.

  • 1

    This idea is not good because the order of the classes can be changed.

  • @Sam, and is that a problem? The author does not mention this in the question...

  • 1

    It probably is, because HTML is generated dynamically and there is no guarantee that post-72 will be the first class of the element. If it is something like categoria post-72 this solution no longer works. Basically you become dependent on a situation that has no control.

  • Ahhh yes, now I understand the problem...

  • I edited the answer... It’s a little less performative, but it covers all cases. :)

4


Here is a very simple form. When you click on article he returns the ID that’s in it. I used the querySelectorAll to catch qq article, and in the forEach I call a function that returns the ID element clicked on the console, but there you can put qq function type...

var meuID = document.querySelectorAll('article');

function quemEH(el) {
   var nome = el.currentTarget.id;
    console.log(nome)
}
meuID.forEach( (artigo) => {
    artigo.addEventListener('click', quemEH);
})
<article id="n1">article com ID n1</article>
<article id="n2">article com ID n2</article>

2

Take the parent div by class and then the element by tag article and finally the attribute id:

var id = document.getElementsByClassName("representatives-list")[0]
.getElementsByTagName("article")[0]
.getAttribute("id");
console.log(id);
<div class="representatives-list">
   <article id="72"></article>
</div>

1

I believe it will be possible through searching for elements by classname, for example:

document.getElementByClassName("representative-list")[0].getElementByClassName("post72")
  • 1

    Can simplify to document.querySelector(".representative-list .post-72"), but in that case you would still need to know the class .post-72, which is precisely the id of the publication.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.