使用2个数据属性定位HTML元素

时间:2015-01-13 05:42:53

标签: javascript jquery html

我在定位具有2个数据元素的div时出现问题。以下是代码片段:

    <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>

请你帮我用JQuery定位一个按钮。我试过这个

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

但它似乎无法发挥作用。

提前感谢您,如果我发布重复的问题,很抱歉。我无法找到类似的问题。

编辑:我想在搜索中同时拥有两个数据属性,就像在我的另一个代码中一样,有一个类似的结构:

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

所以只按数据名称搜索不足以定位右键

4 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

如果您想要找到具有data-button属性且data-name不同的按钮,则可以这样做

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

注意:这只是建议..


你可以这样做使用多个属性选择器

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

详细了解:Multiple Attribute Selector [name="value"][name2="value2"]

答案 2 :(得分:1)

attr()中指定属性名称和值。它会工作。

方法1:

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

或者,您也可以使用嵌套调用attr()

方法2:

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

注意: 现在出现了问题。根据我的代码,将为所有具有

的按钮触发click事件
  

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

但是,如果您只想为同时具有

的按钮触发click事件,该怎么办?
  

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

然后我建议使用已经被许多人回答的嵌套选择器选项。还在这里演示,

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

working fiddle

答案 3 :(得分:0)

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