Search through ID and attribute

Asked

Viewed 903 times

3

How to get a div for example through your ID and Attribute in specific like this:

   <div id="Y" data-id="X"></div>

that is, a code that picks up a DIV with id=Y and data-id=X

javascript jquery

  • I saw that you changed the accepted answer. I have nothing against Ricardo’s answer, but I’m curious if there was something wrong with my answer?

  • @Sergio I will not mark any and I will wait for the votes to rise, you were quick and showed what I wanted, he was helpful and gave his time to help me, I get really divided, great response to your.

  • 1

    You can leave Ricardo’s response marked, he’s essentially right. I just wanted to know if there’s anything in my answer that wasn’t helpful. Now I know that both were useful. Regarding the vote the community will vote in it over time. You choose which one is right/accepted.

2 answers

2

To search for both (Redundant):

$('#Y[data-id="X"]').html('hauahu');

To search for the id is this way with javascript pure:

var x = document.getElementById("Y");

To search by class (will return an array with all objects with a certain class):

var x = document.getElementsByClassName("example");

Or using jquery:

$("ul").find("[data-id=X]");

This is basically the construction of selectors, these which can be used in a variety of functions of the jquery.

To search for different selectors you can use this construction (supported by all browsers Current).

var x = document.querySelectorAll('[property]');

Sources who say that I attack you id must be unique:

W3 test

Prgrammers asks

Documentção W3

2

If you want to find an element with both attributes you can use 

var div = document.querySelector('#Y[data-id="X"]');
// ou ainda:
var div = document.querySelector('[id="Y"][data-id="X"]');

In this example it is redundant to use data-id="X" for the #Y must be sufficient since Ids must be unique. But in case of another assignment data- or class you can use like this:

var div = document.querySelector('.minhaClass[data-id="X"]'); 
// ou noutros casos
var div = document.querySelector('[data-custom="Y"][data-id="X"]');

That is: CSS selectors should be together, with no space, when the idea is to select an element with both attributes.

Browser other questions tagged javascript jquery

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