CODEWITHSUNDEEP
javascriptjquery
kiran gudla
kiran gudla

Reputation: 177

hiding/show elements with same class name individually

The problem I have is selecting (hide/show) list items based on the content of their children

I can't add or change the ids or classes (these are set by the crm and will vary)

I need to hide/show information depending on what is selected. eg. "hide the list items that contain the words 'Accommodation Type' in the child div that is of class type 'Title'"

So it would hide this list item: please only list item with accomodation type in the child div should be hidden.

<!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>

Upvotes: 2

Views: 1022

Answers (2)

Xaxis
Xaxis

Reputation: 1995

You could use an iterator and test the inner content of each li like so:

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

Upvotes: 0

Stryner
Stryner

Reputation: 7318

You could use the :has selector with the :contains selector

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

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

Upvotes: 6

Related Questions