Improve company productivity with a Business Account.Sign Up

x
?
Solved

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

Posted on 2014-04-24
5
Medium Priority
?
319 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
ID: 40020769
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 1000 total points
ID: 40021023
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
ID: 40022958
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 1000 total points
ID: 40022998
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 1000 total points
ID: 40023265
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 Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
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…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

579 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