CODEWITHSUNDEEP
javascriptjqueryattributes
ThanosLovesYuna
ThanosLovesYuna

Reputation: 87

javascript iterate through dom looking for specific aria-label

I've spent hours on this one.

My company is forced to use a non-user-friendly 3rd party website. We only use IE11. My job is to use javascript and jquery to customize the screen and make things a little easier for our users. I use a bookmarklet to insert <script> tags into IE and reference a .js file saved locally.

This website uses hundreds of input text fields but we only need a handful of them. So, I want to highlight input text fields on the screen. Some fields have ID's some only have Name. For the most part, this works:

$(document.getElementById('s_3_1_18_0').toggleClass("highlightField"); $(document.getElementsByName('s_3_1_19_0')[0]).toggleClass("highlightField");

HighlightField simply adds CSS background-color: yellow !important

The problem is, this 3rd party app changes the ID and the Name in bizarre ways. One day, the name will be 's_3_1_19_0', the next it will be 's_3_2_48_0'. So highlighting using this method is not stable.

However, these fields have an area-label that stays constant. I'm wondering how to use javascript or jquery to iterate through each text box, looking for a specific aria-label. For example, the "valid to" field has a bizarre name that changes all the time but it's aria-label is always "Valid To".

Can anyone please help me with this?

Upvotes: 1

Views: 281

Answers (2)

meteor
meteor

Reputation: 2568

You can use jquery to get the list of all aria-label attributes and use a switch case to perform what you need. Something like this switch ($(this).attr('aria-label')) { case 'label1': { //do something break; } }

Upvotes: 0

Andrew W
Andrew W

Reputation: 107

You can find the input with the aria-label "Valid To" by searching for

$(document).find('input').attr('aria-label', 'Valid To');

I recommend being a little bit more specific than $(document), though. That searches the entire doc.

Upvotes: 3

Related Questions