Seguimos con un nuevo ejemplo de un selector JQUERY de elementos DOM de un documento HTML, en esta ocasión vemos como seleccionar un hijo único de un padre. En este caso se le indica que busque elementos únicos dentro de un elemento padre, si hay varios no se seleccionan.
Ejemplos, selector :only-child
<!DOCTYPE html>
<html>
<head>
<title>Selectores de un hijo único para un padre</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#miId').click(function(){
$('ul li:only-child').css({"border":"1px solid red"});
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id='miId'>Selector de los li únicos para los padres ul</h1>
<ul>
<li class="pr">
Lista 1
</li>
<li>
Lista 2
</li>
<li class="pr">
Lista 3
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul>
<h2>Lista 2</h2>
<ul>
<li>
Lista 1
</li>
<li class="pr">
Lista 2
</li>
<li class="pr2">
<a href=''>Lista 3</a>
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul>
<h3>Lista 3</h3>
<ul>
<li>
Lista 1
</li>
</ul>
</body>
</html>
Vamos a analizar la única línea JQUEY nueva:
$('ul li:only-child').css({"border":"1px solid red"});
Lo que hace es buscar en todos los elementos padres ul, elementos li, y si no hay más que 1, le dibuja el borde rojo.