javascript - 根据数据属性值获取 中的输入元素

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 的输入元素.我只想使用 data-name='background_colour' 获取 tr 中的那些元素。

希望这是有道理的。

Answer 1

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

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

这里 tr[data-name="background_colour"] 会找到您正在寻找的 tr 然后是后代选择器以及 input selector(input.wp-color-picker) 将找到目标元素。

• > Attribute equals selector
• > Descendant selector