2014-09-03 2 views
2

나는 자녀의 내용에 따라 (표시/숨기기) 목록 항목을 선택하는 것입니다 한 문제숨기기/쇼 요소를 개별적으로

I 추가하거나 ID 또는 클래스를 변경할 수 없습니다 (이이 CR에 의해 설정되어 달라질 수 있습니다)

내가 선택한 항목에 따라 정보를 숨기거나 표시해야합니다. 예. "클래스 유형이 '제목'인 하위 div에 '숙박 유형'이라는 단어가 포함 된 목록 항목을 숨 깁니다.

이렇게 목록 항목을 숨길 수 있습니다. 하위 항목에 조절 유형이있는 항목 만 나열하십시오. 숨어있다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <title>New Web Project</title> 
      <script src="jquery.min.js"></script> 
      <script> 
      $(document).ready(function() 
      { 
       $("li"). 
       var title = $("li").find('div[class=Title]').html();   
       if(title == "Accommodation Type") 
       { 
        $('div[class=Title]').parent().parent().hide(); 
       } 

      }); 
      </script> 

     </head> 
     <body> 
      <ul> 
    <li> 
    <div class="Group"> 
    <div class="Title">Accommodation Type</div> 
    <div class="Item"> 
    <select> 
    <option value="">-- Please select --</option> 
    <option value="30393382">Motel</option> 
    <option value="30393383">Hotel</option> 
    </select> 
    </div> 
    </div> 
    </li> 
    <li> 
    <div class="Group"> 
    <div class="Title">Adults</div> 
    <div class="Item"> 
    <select> 
    <option value="">-- Please select --</option> 
    <option value="30393382">1 Adult</option> 
    <option value="30393383">2 Adults</option> 
    </select> 
    </div> 
    </div> 
    </li> 

    </ul> 
     </body> 
    </html> 

답변

6

당신은

$("li:has(div.Title:contains('Accommodation Type'))").hide(); 

바이올린 여기 :contains 선택으로 :has 선택기를 사용할 수 있습니다 : 당신은 반복자를 사용할 수 http://jsfiddle.net/8k5tnpjm/

+1

니스 i 선택기가 읽기가 어렵더라도 nline 솔루션을 제공합니다. – Regent

+0

@Regent 나는 읽기가 아주 쉽다. '숙박 유형'이 포함 된 div.title이있는 li을 선택하십시오. 꽤 선형입니다. 개인적인 의견은 헛되이! –

0

등과 같은 각 li의 내부 콘텐츠를 테스트 :

$('li').each(function(index, elm) { 
    var title = $(this).find('div[class=Title]').html(); 
    if (title == 'Accommodation Type') { 
    $(elm).hide(); 
    } else { 
    $(elm).show(); 
    } 
}); 
관련 문제