Solved

jQuery: Select link if there is NOT a <div> immediately after the link

Posted on 2014-04-24
5
297 Views
Last Modified: 2014-04-25
Using jQuery, how can I select all <a> tags where there is not a <div> immediately after the a tag?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // make links red if there is not a <div> after the link
  $('a').css('color','#ff0000');
});
</script>
</head>
<body>
<ul>
 <li><a>should be red</a></li>
 <li><a>should be black</a><div></div></li>
 <li><a>should be red</a></li>
 <li><a>should be red</a></li>
 <li><a>should be red</a></li>
 <li><a>should be black</a><div></div></li>
</ul>
</body>
</html>

Open in new window

0
Comment
Question by:hankknight
5 Comments
 
LVL 20

Expert Comment

by:Russ Suter
Comment Utility
I think you'd need to iterate through each <li> element and look at the innerHTML property. You wouldn't need jQuery for this but to make life easier you might want to give the <ul> element an id attribute. Then your javascript might look something like this.

var parentElement = document.getElementById("myUnorderedList");
var children = parentElement.childNodes;
var noDivElements = new Array();
for (var i = 0; i < children.length; ++i)
{
  if (children.innerHTML.indexOf("div") === -1) // there's no div here
  {
    noDivElements.push(children[i]);
  }
}

Open in new window

0
 
LVL 3

Assisted Solution

by:buttonMASTER
buttonMASTER earned 250 total points
Comment Utility
You can use a combination of the not and has filters and take advantage of the ul and li tags:

$('ul li:not(:has("div")) a').css('color','#ff0000');

Open in new window

0
 
LVL 16

Author Comment

by:hankknight
Comment Utility
Thanks, but I need to test if there is a div immediately after the link, not just if there is a div.  Here is a better example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // make links red if there is not a <div> after the link
  $('a').css('color','#ff0000');
});
</script>
<style type="text/css">
a, div {
display: inline-block;
}
<div>

</style>
</head>
<body>
<div id="browse">
  <a>should be red</a>
  <a>should be black</a><div>Hello</div>
  <a>should be red</a>
  <a>should be red</a>
  <a>should be black</a>
      <div>Hello</div>
  <a>should be red</a>
</ul>
</div></li>
</ul>
</body>
</html>

Open in new window

0
 
LVL 3

Assisted Solution

by:buttonMASTER
buttonMASTER earned 250 total points
Comment Utility
Oh sorry I got ahead of myself. In that case would you be against using two statements to get the job done? The first one would color all the anchors red, and the second one would turn the anchors with divs after it black:

$('#browse a').css('color','#ff0000');
$('#browse div').prev('a').css('color','black');

Open in new window

0
 
LVL 2

Accepted Solution

by:
Immanuel Phillips earned 250 total points
Comment Utility
Alternatively, you can also loop through the elements and use next() and Node.nodename to check if the element next to it is a div.

$("#browse a").each(function() {
  if ($(this).next().get(0) == undefined || $(this).next().get(0).nodeName != 'DIV') {
    $(this).css('color','#ff0000');
  }
});

Open in new window

0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now