jquery find function not working

Question

I have html with 2

<select> ... </select>

elements inside a span with class spanClass. Now i am trying to select those selects with jQuery with this code:

jQuery(document).ready(function() {
    spans = jQuery('.spanClass');
    spans.each(function() {

        var inputs = jQuery(this).find('select');
        console.log(inputs);// This is working
        inputs.each(function() {
            alert('test'); //This not
       });
    });
});

HTML:

<table>
<tr>
    <td>
        <select name="een">
            <option> test </option>
        </select>
    </td>
</tr>

        <select name="twee">
            <option> test </option>
        </select>
    </td>
</tr>
</table>

However, this is not working, can anybody tell me why?

Answer 1

First> Put Table inside Div instead of Span (it's the correct way to do this)

Second> Correct your table tags as the following image and codes (some of them are incorrect!)

Now> Use these codes

HTML:

<div class="divClass">
<table>
    <tr>
        <td>
            <select name="een">
                <option> test </option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            <select name="twee">
                <option> test </option>
            </select>
        </td>
    </tr>
</table>
</div>

jQuery:

jQuery(document).ready(function() {
    spans = jQuery('.divClass');
    spans.each(function() {

        var inputs = jQuery(this).find('select');
        console.log(inputs);
        inputs.each(function() {
            console.log(jQuery(this).prop("name")); 
       });
    });
});

Result:

Answer 2

var inputs = jQuery(this).find('select');   // Isn't inputs empty jQueryObject? length 0?

如果输入为空jQueryObject，则永远不会调用.each（）传递的回调函数。