Fun with JQuery Selectors

Lately I’ve been getting into some advanced selector options with JQuery. Selectors are what the action takes place upon. For example, $(‘h2′) will select all of the <H2> tags while $(‘p[class=”summary”]) will choose all of the <p class=”summary”> blocks.

While these are easy, today I had a real challenge. I had markup similar to this:

1
2
3
4
5
6
7
8
9
10
11
12
<h2 id="stats">
  <span aria-hidden="true" data-icon=""></span>
  Stats
</h2>
<h2><span aria-hidden="true" data-icon=""></span>
   One
</h2>
<h2>Two</h2>
<h2>Three</h2>
<h2 id="four">Four</h2>
<h2 id="five">Five</h2>
<h2 id="six">Six</h2>

Three things needed to happen:

  • An icon needed to appear corresponding to a “data-icon” attribute, if present
  • <H2> tags without an id and without a specified icon needed a question mark
  • <H2> tags with an id, but without a specified icon needed an exclamation point

I’m using a custom icon font family generated at IcoMoon and the following CSS for the actual icons:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.svg#icomoon') format('svg'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-alone {
  display: inline-block; /* Fix for clickability issue in WebKit */
  font-size: 36px;
  text-decoration:none;
  color:#60F;
}
.screen-reader-text { /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Thanks to CSS-Tricks for their code and an explanation of icons and screen readers.

The Stats and One headers are our plain vanilla markup handled purely by CSS. They both have specific data-icon attributes on their associated spans.

First, let’s add the question mark icon to those headers which don’t have an id:

1
2
3
$('h2:not([id]):not(:has(span))').each(function(){
  $(this).prepend('<span aria-hidden="true" data-icon=""></span>');	
});

<$(‘h2:not([id]):not(:has(span))’)> is the selector in in plain English it reads thus:
Get header tag of <H2>
that doesn’t have an id :not([id])
and doesn’t have a child span <:not(:has(span))>.

To each element that the selector finds we want to attach as the first item under the element a new span <( $(this).prepend(‘‘);>

We now our question mark icons. Next, we need our exclamation point icons for those headers that have an id, but lack a specified data-icon:

1
2
3
$('h2[id]:not(:has(span))').each(function(){
  $(this).prepend('<span aria-hidden="true" data-icon=""></span>');	
});

The selector is <$(‘h2[id]:not(:has(span))’)> and in plain English is reads:
Get each h2 header tag that has any id attribute set <$(‘h2[id]>
excluding ones that do have a child span <:not(:has(span))>.

icons

View Demo.


jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’);

/* <![CDATA[ */
nRelate.domain = "www.sophrosynelife.com";
var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Ffun-with-jquery-selectors%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text();
nRelate.getNrelatePosts(entity_decoded_nr_mp_url);
/* ]]> */

The post Fun with JQuery Selectors appeared first on Sophrosyne Life.

Follow me

Submit a Comment