jQuery if Element is Found

**Kage Kazumi** · 10-15-2012, 05:01 AM

I'm just starting jQuery and have the basics down and would like to use the "if" statement. You can show me the code or link to a tutorial or example coding.

How would I code jQuery to do the following (I know it has to be the 'if' statement, but not sure how to code it:

When the LINK "Books" is clicked -- If .wrapper element contains a .Book element anywhere in it; Example:

HTML Code:

<a href="#" id="book">Book</a> | <a href="#" id="magazine">Magazine</a>
<br />
<div class="wrapper">
<img src="#" class="book" />
</div>
<div class="wrapper">
<img src="#" class="book" />
<img src="#" class="magazine" />
</div>
<div class="wrapper">
<img src="#" class="magazine" />
</div>

Remove/hide all .wrapper that do not have .book inside the .wrapper. So the above HTML would end looking like:

HTML Code:

<a href="#" id="book">Book</a> | <a href="#" id="magazine">Magazine</a>
<br />
<div class="wrapper">
<img src="#" class="book" />
</div>
<div class="wrapper">
<img src="#" class="book" />
<img src="#" class="magazine" />
</div>

v/Respectfully
Kage

**keyboard** · 10-15-2012, 05:04 AM

Just one quick note,
You can't have more than one div with the same id.
You should change id="wrapper" to class="wrapper"

**Kage Kazumi** · 10-15-2012, 05:06 AM

Originally Posted by keyboard1333

Just one quick note,
You can't have more than one div with the same id.
You should change id-"wrapper" to class="wrapper"

What do you mean I can't? You mean jQuery can't?

~Kage

**keyboard** · 10-15-2012, 05:14 AM

No; in html, you aren't supposed to have two elements with the same id on one page.

**Kage Kazumi** · 10-15-2012, 05:24 AM

Originally Posted by keyboard1333

No, in html, you aren't supposed to have two elements with the same id on one page.

So I need to switch all my wrappers to .wrapper?

Or can I not have more then one of the same class either?

~Kage

**bernie1227** · 10-15-2012, 05:29 AM

No, because it can cause your code to stop working completely. Take keyboards suggestion and change the id's to classes, or you could have some serious problems in the future.

**Kage Kazumi** · 10-15-2012, 05:40 AM

Originally Posted by bernie1227

No, because it can cause your code to stop working completely. Take keyboards suggestion and change the id's to classes, or you could have some serious problems in the future.

Okay so then back to the original question.

Thanks for the tip.

EDIT: changed my sample HTML to reflect the IDs to Class.

~Kage

**keyboard** · 10-15-2012, 05:47 AM

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript">
$(window).load(function() {
	$('#book').click(function() {
		$(".wrapper:not(:has(img.book))").remove();
	});
});
</script>
</head>
<body>
<a href="#" id="book">Book</a> | <a href="#" id="magazine">Magazine</a>
<br />
<div class="wrapper">
<img src="#" class="book" />
</div>
<div class="wrapper">
<img src="#" class="book" />
<img src="#" class="magazine" />
</div>
<div class="wrapper">
<img src="#" class="magazine" />
</div>
</body>
</html>

**jscheuer1** · 10-15-2012, 05:52 AM

Well it is a specification that in HTML you cannot have more than one element on a page with a given id. But in ordinary HTML and css this rarely if ever causes any problem. In javascript though, if you look for an element with an id and there's more than one, you either get an error or only the first one. jQuery is built on javascript and follows this same model. In both ordinary javascript and jQuery there are ways of looking for elements that will get around this limitation. But in every case it's safer and easier to use class instead of id if multiple elements are involved.

Oh, and if your page looks like this:

HTML Code:

<a href="#" id="book">Book</a> | <a href="#" id="magazine">Magazine</a>
<br />
<div id="wrapper">
<img src="#" class="book" />
</div>
<div id="wrapper">
<img src="#" class="book" />
<img src="#" class="magazine" />
</div>
<div id="wrapper">
<img src="#" class="magazine" />
</div>

before, it will look like that after. You just won't see, when looking at the page in the browser, those elements that have been hidden. They're not actually removed when you use jQuery's .hide() method. They could be if you wanted to do that. It would require another method be used though.

OK, so let's use this HTML:

HTML Code:

<a href="#" id="book">Book</a> | <a href="#" id="magazine">Magazine</a>
<br />
<div class="wrapper">
<img src="#" class="book" />
</div>
<div class="wrapper">
<img src="#" class="book" />
<img src="#" class="magazine" />
</div>
<div class="wrapper">
<img src="#" class="magazine" />
</div>

And, you're probably right about needing if - but only in ordinary javascript. In jQuery you can use its selector syntax and chaining to determine what gets done to which elements (I added text to the divs to make it easier to see what's happening, but if you have real images, you won't need that):

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('#book, #magazine').click(function(e){
		$('.wrapper').hide().has('.' + this.id).show();
		e.preventDefault();
	});
});
</script>
</head>
<body>
<a href="#" id="book">Book</a> | <a href="#" id="magazine">Magazine</a>
<br />
<div class="wrapper">
<img src="#" class="book" />
I'm just a book div
</div>
<div class="wrapper">
<img src="#" class="book" />
<img src="#" class="magazine" />
I'm a book and magazine one
</div>
<div class="wrapper">
<img src="#" class="magazine" />
only a magazine here
</div>
</body>
</html>

**Kage Kazumi** · 10-15-2012, 06:07 AM

I thank you both, but neither of those worked. I was hoping for something that would be easy to use and simply edit as needed, but I guess their is some kind of issue: http://zanime.net/test/

~Kage