Select div parent elements of each span in jQuery

Description

The following code shows how to select div parent elements of each span.

Example


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from www .j  a v  a  2s .c  om-->
function showParents() {
var len = $("span").parents("div").css("border", "2px red solid").length;
$("b").text("Unique div parents: " + len);
}
$("span").click(function () {
showParents();
});
});
</script>
<style>
.selected { color:blue; }
</style>
</head>
<body>
<div>
<div><span>span</span></div>
<span>span</span>
</div>
<div>
<span>java2s.com</span>
</div>
<b></b>
</body>
</html>

Click to view the demo

The code above generates the following result.

Select div parent elements of each span in jQuery
Home »
  Javascript Tutorial »
    jQuery »
      jQuery Select
...
Select Header element with header element s...
Select LI list element by index in jQuery
Select all LI elements for a UL element and...
Select all div tags $("div") in jQuery
Select all elements that are the first chil...
Select all elements that are the last child...
Select all elements that are the nth-child ...
Select all elements that are the only child...
Select all elements under a certain element...
Select all p elements inside a div in jQuer...
Select all previous tags and set styles in ...
Select all the divs before the last and giv...
Select an element by element name and its i...
Select based on text content with Contains ...
Select by check child element with has meth...
Select current and next element in jQuery
Select current element with $(this) selecto...
Select div element with paragraph inside $(...
Select div parent elements of each span in ...
Select element by Combining first selector ...
Select element by checking if if the specif...
Select element by class name in jQuery
Select elements by tag name $("div") in jQu...
Select elements with id attribute in jQuery
Select empty table cell in jQuery
Select even numbered child in jQuery
Select event table row with Even element se...
Select first paragraph with first selector ...
Select first paragraph with given class in ...
Select for Odd table row with odd element s...
Select for nested classes with .myClass.myO...
Select input element by name a...
Select input element by name attribute in j...
Select input element that don't have the na...
Select last paragraph in jQuery
Select not checked form input elements in j...
Select numbered child in jQuery
Select odd numbered child in jQuery
...