Select Singular jQ object for variable

Question

I have this short single line of code for assigning a variable.

var ulbl = $(e.target).is('.user-label') ? $(e.target)[0] : null;

Since I'm neurotic, the fact that I have to reference the first index of the jQ object bothers me. I know I could use .first() or do $(e.target + ':first') but I'm not convinced those choices are the best either.

Just to establish a variable inside an $.on('click', 'tr') everything runs as expected, I'm more interested if it can be refactored any further.

HTML

<tbody data-bind="foreach: items">
    <tr data-bind="attr: {
        'item-type': item_type,
        'list-idx': id,
        'section-id': sectionID,
        'group-id': displayOrder,
    },
    css: {
        'text-info': headerDepth() > 1,
        'bg-info': headerDepth() > 1
    }">
            <!-- First Column -->
        <td class="button-group-col" data-bind="visible: headerDepth() > 1 ? buttonGroup() ? true : false : true">
        </td>
            <!-- Second Column -->
        <td style="width: 80%;" data-bind="visible: headerDepth() > 1 ? true : false,
        attr: {
            colspan: headerDepth() > 1 ? buttonGroup() ? 2 : 3 : 1
        }">
        </td>
            <!-- Third Column -->
        <td class="time-stamp-col" data-bind="visible: headerDepth() > 1 ? false : true">
            <div data-bind="foreach: fill_data">
                <span class="label label-success user-label" data-bind="text: userID, attr: {
                title: f_time,
                'user-id': userID
            }">
                LABEL
            </span>
        </div>
    </td>
</tr>
</tbody>

Answer 1

• $(e.target + ':first') wont do anything. This concats an HTML element with a string.
• $("myselector").first() returns a jquery object containing the first element.
• $("myselector")[0] is an actual DOM element, not a jQuery object at all.
• When you pass a DOM element into a jQuery object, that object will only wrap the element you passed to it, therefore it only has one element, therefore $(e.target) and $(e.target).first() are exactly the same thing.
• An alternative to .first() is .eq(0)
• Generally, most of the time you can use this instead of e.target in the scope of an event handler.
• Generally, you don't have to reference the first element in a jquery object as most jQuery methods apply to all elements in the group. The real answer here has to do with how you're defining your even handler. try this...$(document).on('click', 'tr:first') to select only the first table row.

Answer 2

Generally you want to prefer using vanilla JavaScript whenever you can, because jQuery has a 1000 checks and can slow down your website pretty fast.

also

this === e.target === $(e.target)[0]

They all return the same result in a jQuery Event

JavaScript solution

//check if user-label exists in the string
if(this.className.indexOf('user-label') !== -1){
  //do something with this
}

jQuery solution

if($(this).hasClass('user-label')){
  //do something with this
}

A little extra thing when to do when you are programming is to name your variable with proper names, what does ulbl mean? Always imagine that you are coding for someone else, even if you are the only person on the project, because if you ever come back to the project then you will be the someone else that you programmed for.