CODEWITHSUNDEEP
javascriptjquery
TheRealPapa
TheRealPapa

Reputation: 4539

jQuery find first element with data attribute

I am trying to find the first element with a data attribute of data-uuid inside a table row. I can see examples of finding an element that has a data attribute of a value, but I do not know the value, I just want to find the element with the attribute.

My 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>

I want a generic way to find first element (rather than using this example's input element, as this is a function re-used for other forms of similar structure.

I have tried this:

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

also this:

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

also this:

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

but uuid is undefined. How do I find this element.

Upvotes: 0

Views: 1055

Answers (1)

Petrashka Siarhei
Petrashka Siarhei

Reputation: 732

Maybe Your html hasn't tag <table>, I add table and next code:

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

All ok. https://codepen.io/piotrazsko/pen/RxvBNP Also , you can try code without jquery:

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

Finding row without tag <table> not working.

Upvotes: 0

Related Questions