CODEWITHSUNDEEP
javascriptjqueryhtml
lightbringer
lightbringer

Reputation: 835

Target HTML element using 2 data- attributes

I'm having problems targeting a div that has 2 data- element. Here is a snippet of the code:

    <button data-button="inventoryb" data-name="overview" style="width:120px">Overview</button>
    <button data-button="inventoryb" data-name="schedule" style="width:120px">Schedule</button>
    <button data-button="inventoryb" data-name="plan" style="width:120px">Inventory Plan</button>
    <button data-button="inventoryb" data-name="atl" style="width:120px">Inventory ATL</button>

Could you please help me target one button using JQuery. I've tried this

$("button[data-button='inventoryb']").find("button[data-name='overview']").click();

but it doesn't seem to work.

Thank you in advance, and sorry if I post a duplicate question. I couldn't find a similar problem to mine.

Edit: I would like to have both data- attributes in the search, as in another code of mine, there is a similar structure:

    <button data-button="taskb" data-name="overview" style="width:120px">Overview</button>
    <button data-button="taskb" data-name="list" style="width:120px">Schedule</button>

so just search by data-name is not enough to target the right button

Upvotes: 1

Views: 305

Answers (4)

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

Specify the attribute name and value inside attr(). It'll work.

Method 1 : 

$("button[data-button='inventoryb']").attr("data-name","overview").click();

Or, you can also go with the nested call to attr()

Method 2 : 

$("button").attr("data-button", "inventoryb").attr("data-name","overview").click();

Note : Now there's an issue. According to my code the click event will be fired for all the buttons having

data-button='inventoryb' or data-name='overview'

But what if you want to fire the click event only for the buttons having both

data-button='inventoryb' and data-name='overview'

Then I suggest to go with the nested selector option which has already been answered by many. Still giving a demo here,

$("button[data-button='inventoryb'][data-name='schedule']").click();

working fiddle

Upvotes: 1

prog1011
prog1011

Reputation: 3495

$("button [data-button='inventoryb'][data-name='overview']").click();

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176934

you can do like this if you want to locate button which is having data-button attribute and data-name is different, 

$( "button[data-button][data-name='list']" ).click();

Note : this is just suggestion..

you can do like this use multiple attribute selector 

$( "button[data-button='inventoryb'][data-name='overview']" ).click();

Read more about this : Multiple Attribute Selector [name="value"][name2="value2"]

Upvotes: 1

u.k
u.k

Reputation: 3091

$("button[data-button=inventoryb][data-name=overview]").click()

Upvotes: 3

Related Questions