Select class 的元素，如果它具有此特定数据属性 (jQuery)

Question

考虑这个 HTML:

<button class="btn-edit"   data-user="joe">   Need to select this. </button>
<button class="btn-cancel" data-user="joe">   Not this. </button>
<button class="btn-edit"   data-user="sally"> Not this. </button>
<button class="btn-cancel" data-user="sally"> Not this. </button>

我想要 select 第一个按钮 - Joe 的编辑按钮。基本上在所有编辑按钮中，我想要 select 与我拥有的数据属性相匹配的按钮。

我走到这一步：

$('[data-user="joe"]')

但是 select 了顶部的两个按钮。

加分："joe" 作为变量出现。所以我正在处理：

var userNameFromForm = "joe";
$('[data-user="'+userNameFromForm+'"]')

但这很疯狂，所以我很乐意回答原始问题，或者如果我走错了方向，可以提出如何最好地重构它的建议。

Answer 1

添加 class select 或 .btn-edit，然后使用 :first selector, or the .first() method 到 select [=21= 中的第一个元素] 对象：

$('[data-user="joe"].btn-edit:first');
// or
$('[data-user="joe"].btn-edit').first();

同样适用于带有变量的版本：

var userNameFromForm = "joe";

$('[data-user="' + userNameFromForm + '"].btn-edit:first');
// or
$('[data-user="' + userNameFromForm + '"].btn-edit').first();

Answer 2

正如 Josh Crozier 提到的，您可以尝试使用 :first 选择器，但我不建议您这样做，除非您确定按钮的顺序不会改变。我可能会建议使用更多选择器或为您的按钮添加 ID。

例如，您还可以定位 class 名称 btn-edit，因为我可以看到它们在您的代码段中是独一无二的：

$('.btn-edit[data-user="joe"]')

但最安全的方法是使用唯一名称作为 ID 属性：

<button id="edit" class="btn-edit" data-user="joe"></button>

$('#edit')

Answer 3

var userNameFromForm = "joe";

        //$('.btn-edit[data-user=' + userNameFromForm + ']') element that you want

        $('.btn-edit[data-user=' + userNameFromForm + ']').css('color', 'red')

Select class 的元素，如果它具有此特定数据属性 (jQuery)

Select an element by class IF it has this particular data-attribute (jQuery)

html

jquery

button

jquery-selectors