Question

我有以下代码：

<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。我只想获得tr内data-name='background_colour'内的元素。

希望这是有道理的。

Answer 1

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

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

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

Answer 2

你可以这样做

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

实施例：

＆＃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;

Answer 3

试试这个

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

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

3 个答案: