缩短 jQuery 多个子选择器

Question

我觉得这不是选择数据的正确方法：

$(document).on('blur', 'td', function(){   
cID = $(this).children('div.cColor')
                 .children('select.dropdown.cColor_dropdown')
                 .children("option")
                 .filter(":selected")
                 .data("cid");
}

有什么方法可以缩短这个繁琐的选择器吗？编辑：html

 <tr>   
        <td class="cID">
            <div class="cColor">
                <select class="dropdown cColor_dropdown" >
                <option data-cID="21" value="client_name">client_name</option>
                <option data-cID="22" value="2_client_name">2client_name</option>
                </select>
            </div>
        </td>
 </tr>
 <tr>   
    <td class="cID">
                <div class="cColor">
                    <select class="dropdown cColor_dropdown" >
                    <option data-cID="21" value="client_name">client_name</option>
                    <option data-cID="22" value="2_client_name">2client_name</option>
                    </select>
                </div>
            </td>
 </tr>

Answer 1

如果您提供标记 (HTML) 会更有帮助。有很多选择：

cID = $(this).find('div.cColor>select.dropdown.cColor_dropdown>option:selected').data("cid");
cID = $(this).find('option:selected').data("cid"); // if there is only one select
cID = $(this).find('select#select-id>option:selected').data("cid"); // select with id
cID = $(this).find('select#select-id option:selected').data("cid"); // if select specified, no need for >

缩短 jQuery 多个子选择器

Shorten jQuery multiple children selector

jquery

children

jquery-selectors