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

hiding/show elements with same class name individually

本文关键字：同类 元素 隐藏 显示 单独      更新时间：2023-09-26

我遇到的问题是根据其子的内容选择（隐藏/显示）列表项

我不能添加或更改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>

您可以将:has选择器与:contains选择器一起使用

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

Fiddle Here:http://jsfiddle.net/8k5tnpjm/

您可以使用迭代器来测试每个li的内部内容，如下所示：

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