2017-12-27 26 views
1

selects을 정확히 얻는 가장 짧은 방법은 무엇입니까? options? 정확히 4 가지 옵션을 사용하여 모든 보이는 셀렉트 찾기

그렇지 않으면 나는이 작동하지 않는 것 루프 각 select에 가지고 $find('option').length == 4

얻을 것이다 :

$.grep($("select:visible"), function() { 
    return $(this).find('option').length == 4; 
}); 
+0

클래스를 추가/생성 할 때 클래스 추가 (예 : opt4)는 어떻습니까? 클래스 선택기를 사용할 수 있습니다. –

+0

@mike_t 미안합니다. 확장자가 – user5858

+0

입니다. ['.has()'] (http://api.jquery.com/has/) 메소드를 사용해 보셨습니까? – agrm

답변

3

당신은 :has(), :eq():not() 선택의 조합을 사용할 수 있습니다.

발현 자식 요소를 제외한다 4 option ALT-않도록, 자식 요소와 표현 :not(:has(option:eq(4)))을 갖는 요소를 대상으로한다.

$("select:visible:has(option:eq(3)):not(:has(option:eq(4)))").css('color', 'red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select> 
 
<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
</select> 
 
<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
</select>


또한 .filter()

$("select:visible").filter(function() { 
 
    return $(this).find('option').length == 4; 
 
}).css('color', 'red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select> 
 
<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
</select> 
 
<select> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
</select>

0

귀하의 코드는 올바른 유일한 문제이다 사용할 수있는 것은 당신이 당신의 포장 필요하다 $ .find 함수를 작동시킬 수있는 요소가있는 요소를 선택하십시오. 예 :

//Going to add a div to wrap all elememts  
var myDiv = $("<div><select><option>1</option><option>2</option><option>3</option></select><select><option>1</option><option>2</option><option>3</option><option>4</option></select><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select><div>"); 
$.grep(myDiv.find("select"),(el)=>$(el).find("option").length===4);