根据数据属性值获取内部输入元素

时间:2015-03-06 03:50:41

标签: javascript jquery html css

我有以下代码:

<tr class="my-field" data-name="background_colour" data-type="color_picker">
    <td class="my-input">
        <div class="my-color_picker">
              <input type="text" class="wp-color-picker">
    </td>
</tr>

我需要使用class="wp-color-picker"获取输入文本元素。

我可以使用$('input.wp-color-picker')执行此操作,但这将使所有输入元素都为class=wp-color-picker。我只想获得trdata-name='background_colour'内的元素。

希望这是有道理的。

3 个答案:

答案 0 :(得分:4)

使用descendant selector将这些与需求相结合

$('tr[data-name="background_colour"] input.wp-color-picker')

此处tr[data-name="background_colour"]会找到您要查找的tr,然后后代选择器和input选择器(input.wp-color-picker)将找到目标元素。

答案 1 :(得分:1)

你可以这样做

$('tr[data-name="background_colour"] input.wp-color-picker')

实施例:

&#13;
&#13;
alert($('tr[data-name="background_colour"] input.wp-color-picker').val());
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="my-field" data-name="background_colour" data-type="color_picker">
    <td class="my-input">
        <div class="my-color_picker">
              <input type="text" class="wp-color-picker" value="hello world">
    </td>
</tr>
  </table>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

试试这个

$("tr[data-name='background_colour'] .wp-color-picker")