Find the first span element with attribute treeid in a DOM

Question

Find the first span element with attribute treeid in a DOM. I want to get the first treeid="1" value from span using li id="TreeView_tv_active"

<li aria-selected="true" data-uid="6d675448-979b-440f-9543-ec65778424b1" class="k-item k-last" role="treeitem" data-expanded="true" aria-expanded="true" id="TreeView_tv_active">
<div class="k-bot">
    <span role="presentation" class="k-icon k-minus"></span>
    <span class="k-state-selected k-in">
        <span treetext="Vegetables" treeid="1" class="enabled">abc</span>
    </span>
</div>
<ul role="group" class="k-group" style="display: block;">
    <li aria-selected="false " data-uid="1d297781-e53c-4e2e-8d10-8837f82e854f" class="k-item" role="treeitem">
        <div class="k-top">
            <span class="k-in">
                <span treetext="Cauliflowers and broccoli" treeid="2" class="enabled">xyz</span>
            </span>
        </div>
    </li>
    <li aria-selected="false " data-uid="86202caa-0997-4a37-8b21-d2f44ef4e63c" class="k-item" role="treeitem">
        <div class="k-mid">
            <span class="k-in">
                <span treetext="Maize" treeid="3" class="enabled">lmn</span>
            </span>
        </div>
    </li>
</ul>

Answer 1

As Praveen suggests, you should use the standard data- prefix on non-standard attributes, however code will still work with the HTML shown:

var id = $('#TreeView_tv_active [treeid]:first').attr('treeid');

JSFiddle: http://jsfiddle.net/raft56gg/

Answer 2

Some issues with your approach.

1. The treeid attribute is not good. Change it to data-treeid and check for it.
2. To get the first matched item on that case, you can use the following code.

Code

$('[data-treeid]').first();

The above code will fetch the first matched elements, which matches only the elements with treeid as an attribute.