Question

我试图在表格行中找到数据属性为data-uuid的第一个元素。我可以看到查找具有值的数据属性的元素的示例，但我不知道该值，我只想找到具有该属性的元素。

我的HTML：

<tr id="row_12">
    <td style="width:320px;">
        <input class="form-control has-feedback table_input name changed_event" type="text" value="" data-rowid="row_new" data-msgid="name" data-orig="" placeholder="Name">
        <input class="form-control has-feedback table_input email changed_event" type="email" value="" data-msgid="email" data-orig="" placeholder="Email">
    </td>
    <td> ... </td>
    <td> ... </td>
    <td> ... </td>
    <td class="table_form_cell">
            <table class="table-sm form_cell">
                <tbody><tr>
                    <td style="width:25%;" class="text-center form_cell_switch">
                        <input class="switch switch-primary activated_at changed_event" type="checkbox" data-rowid="row_new" data-orig="">
                    </td>
                    <td style="width:25%;" class="text-center form_cell_switch">
                        <button type="button" class="btn btn-primary btn-sm btn_reload_row" data-rowid="row_new">
                            <i class="far fa-sync"></i>
                        </button>
                    </td>
                    <td style="width:25%;" class="text-center form_cell_switch">
                        <button type="button" class="btn btn-danger btn-sm btn_delete_row" data-uuid="NEW_USER" data-rowid="row_new">
                            <i class="far fa-trash-alt"></i>
                        </button>
                    </td>
                    <td style="width:25%;" class="text-center form_cell_switch">
                        <button type="button" class="btn btn-primary btn-sm btn_save_row" data-uuid="NEW_USER" data-rowid="row_new" disabled="">
                            <i class="far fa-save"></i>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td colspan="4">
                        <select class="form-control has-feedback table_input changed_event date_format_id" data-orig="1">
                            <option value="1" selected="">21/Jan/2018</option>
                            <option value="2">21-Jan-2018</option>
                            <option value="3">21 January 2018</option>
                            <option value="4">21-January-2018</option>
                            <option value="5">Jan 21, 2018</option>
                            <option value="6">January 21, 2018</option>
                            <option value="7">21/01/2018</option>
                            <option value="8">21-01-2018</option>
                            <option value="9">01/21/2018</option>
                            <option value="10">2018-01-21</option>
                        </select>
                    </td>
                </tr>
            </tbody>
         </table>
    </td>
</tr>

我想要一种通用的方法来找到第一个元素（而不是使用这个例子的输入元素，因为这是一个重用于其他形式的类似结构的函数。

我试过这个：

var uuidElem = $(row).find('[data-uuid]');
var uuid  = uuidElem.data('uuid');

也是这样：

var rowId = getRowId(row);           
var uuid  = $(row).find('[data-uuid]').data('uuid');

也是这样：

var rowId = getRowId(row);
var uuid  = $('tr#' + rowId).find('[data-uuid]').data('uuid');

但uuid未定义。我如何找到这个元素。

Answer 1

也许您的html没有标记<table>，我添加了表格和下一个代码：

 var uuidElem = $('#row_12 [data-uuid]');
  uuidElem.each(function(index){
    console.log($( this ).data('uuid') );
  })

一切都好。 https://codepen.io/piotrazsko/pen/RxvBNP 此外，您可以尝试没有jquery的代码：

let buttons = Array.from(document.querySelectorAll('#row_12 [data-uuid]'));
buttons.forEach((elem)=>{console.log(elem.getAttribute('data-uuid'))})

查找没有标记<table>的行无法正常工作。

jQuery找到第一个带有数据属性

1 个答案: