jquery - 如果元素具有此特定数据属性(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>

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

我做到了这一点:

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

但是这同时选中了顶部的两个按钮。

加分:“joe”作为变量出现。所以我正在处理:

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

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

Answer 1

添加类选择器 .btn-edit，然后使用 :first selector ，或 .first() method选择 jQuery 对象中的第一个元素:

$('[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();