2014-09-03 4 views
2

Проблема у меня есть выбор предметов (/ показать скрыть) список, основываясь на содержании своих детейскрытия/показать элементы с таким же именем класса индивидуально

Я не могу добавить или изменить идентификаторы или классы (это устанавливаются на crm и будут меняться)

Мне нужно скрыть/показать информацию в зависимости от того, что выбрано. например. «скрыть элементы списка, содержащие слова« Тип размещения »в дочернем div, который относится к типу класса« Заголовок »»

Таким образом, это скроет этот элемент списка: пожалуйста, укажите только элемент списка с типом размещения в дочернем элементе 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

Вы можете использовать селектор :has с :contains селектором

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

Fiddle здесь: http://jsfiddle.net/8k5tnpjm/

+1

Nice i nline, хотя селектор довольно трудно прочитать. – Regent

+0

@Regent Я нахожу это довольно простым для чтения. Выберите li, у которого есть div.title, содержащий «Тип размещения». Это довольно линейно. Личное мнение не обращает внимания! –

0

Вы можете использовать итератор и проверить внутреннее содержание каждого li как так:

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