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"]')

但是它选择了前两个按钮。

奖励积分：＆＃34;乔＆＃34;作为一个变量出现。所以我正在处理：

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();

Answer 2

正如Josh Crozier所说，你可以尝试使用:first选择器，但除非你确定按钮的顺序没有改变，否则我不建议这样做。我可能建议使用更多的选择器或在按钮上添加ID。

例如，您也可以定位班级名称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')

按类选择元素如果它具有此特定数据属性（jQuery）

3 个答案: