• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 320
  • Last Modified:

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

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
hankknight
Asked:
hankknight
3 Solutions
 
Russ SuterCommented:
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
 
buttonMASTERCommented:
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
 
hankknightAuthor Commented:
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
 
buttonMASTERCommented:
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
 
Immanuel PhillipsUser Interface EngineerCommented:
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
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

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now