jQuery Selectors: Selects elements that have some content-parent

This entry is part 17 of 33 in the series jQuery Selectors

$(‘E:parent’)

This is the inverse of :empty where it selects elements that have at least some content.

<!DOCTYPE html>
<html>
<head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('p:parent').css('color', 'blue');
        });
    </script>
</head>
<body>
<div>
    <h4>Ushuaia</h4>

    <p>Southernmost city in the world.</p>

    <p></p>
</div>
<div>
    <p>The city centered around a prison built by the Argentine government.</p>

    <p>They also built a railway to the settlement, now a tourist attraction known as the End of the World Train.</p>

    <a href='http://en.wikipedia.org/wiki/Ushuaia'>Visit us here.</a>
</div>
</body>
</html>

jQuery Selectors: Selects elements that have no content

This entry is part 16 of 33 in the series jQuery Selectors

If you have a <div>, <p> or other elements that have empty content, you could sieve them out and maybe fill them with other text string or data.

Note that in the selector, I have also chained a .css() to highlight the selected line to a different color.

So in the example below, line 17 will be selected and the newly added text will be highlighted to blue.

<!DOCTYPE html>
<html>
<head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('p:empty').html('I have some content now.').css('color', 'blue');
        });
    </script>
</head>
<body>
<div>
    <h4>Ushuaia</h4>

    <p>Southernmost city in the world.</p>

    <p></p>
</div>
<div>
    <p>The city centered around a prison built by the Argentine government.</p>

    <p>They also built a railway to the settlement, now a tourist attraction known as the End of the World Train.</p>

    <a href='http://en.wikipedia.org/wiki/Ushuaia'>Visit us here.</a>
</div>
</body>
</html>

 

jQuery Selectors: Selects element that contains a specific child element $(‘has(E)’)

This entry is part 15 of 33 in the series jQuery Selectors

$(‘has(Element)’)

In the example below, it will select all <div> elements that contain a <span> element.

<!DOCTYPE html>
<html>
<head>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $('div:has(span)').css('color', 'blue');
        });
    </script>
</head>
<body>
<div>
    <h4>Ushuaia</h4>

    <p>Southernmost city in the world.</p>
</div>
<div>
    <p>The city centered around a prison built by the Argentine government.</p>

    <p><span>They also built a railway to the settlement, now a tourist attraction known as the End of the World Train</span></p>

    <a href='http://en.wikipedia.org/wiki/Ushuaia'>Visit us here.</a>
</div>
</body>
</html>

jQuery Selectors: Content filter selector-contains

This entry is part 14 of 33 in the series jQuery Selectors

Another set of useful jQuery selectors are the content filter selectors.

These selectors allow you to select HTML elements based on the content inside the HTML element.

The syntax is $(“E:contains(value)”).

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Image</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $("h4:contains('Ushuaia')").css('color', 'blue');
        });
    </script>
</head>
<body>
<div>
    <h4>Ushuaia</h4>

    <p>Southernmost city in the world.</p>

    <img src='//codecrawl.com/code/images/ushuaia.jpg' height="200px">
</div>

</body>
</html>

If we make a slight change to the element by changing h4 to div, all content inside the div will be selected.

$("div:contains('Ushuaia')").css('color', 'blue');

jQuery Selectors: Matches the end of the attribute value E[attr$=value]

This entry is part 13 of 33 in the series jQuery Selectors

E[attr$=value]

Matches any element E whose attribute attr ends in value.

In other words, the value matches the end of the attribute value.

In the example below, we use preventdefault function to prevent the default event, which is to follow the link, to happen.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>codecrawl.com</title>
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
    <script>
        $(function () {
            $("a[href$='.com']").click(function (event) {
                event.preventDefault();
            });
        });
    </script>

</head>
<body>
<a href='http://google.com'>This is to google</a>
<br>
<a href='http://yahoo.com'>This is to yahoo</a>
</body>
</html>

If we have an element with a class name topMenu, we can also match it with class$=Menu.