隐藏/显示具有相同类名的元素

时间:2014-09-03 19:16:42

标签: javascript jquery

我遇到的问题是根据孩子的内容选择(隐藏/显示)列表项目

我无法添加或更改ID或类(这些由crm设置并会有所不同)

我需要隐藏/显示信息,具体取决于所选内容。例如。 “隐藏包含类别'Title'的子div中包含'Accommodation Type'字样的列表项”

所以它会隐藏这个列表项:请只隐藏子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>

2 个答案:

答案 0 :(得分:6)

您可以将:has选择器与:contains选择器

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

在这里小提琴:http://jsfiddle.net/8k5tnpjm/

答案 1 :(得分:0)

您可以使用迭代器并测试每个li的内部内容,如下所示:

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