PDA

View Full Version : Resolved 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:



<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:



<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
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
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
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
<!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:


<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:


<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):


<!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

keyboard
10-15-2012, 06:14 AM
My code works fine... check that the values in yellow are right -



<!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() {
$('#element to click on').click(function() {
$(".container element:not(:has('.element to search parent for'))").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>

bernie1227
10-15-2012, 06:16 AM
$('#window').click(function(e){

there appears to be no element with that id.

Kage Kazumi
10-15-2012, 07:00 AM
$('#window').click(function(e){

there appears to be no element with that id.


Yes it is #windows, but even after fixing it it still does nothing.

@keyboard1333 I could not get yours to work either.

~Kage

keyboard
10-15-2012, 07:11 AM
Open up a new document and just put in this, nothing else -


<!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>

Kage Kazumi
10-15-2012, 07:23 AM
Open up a new document and just put in this, nothing else -


I have no doubt your code works, but it doesn't work for my drop-down selection box.

~Kage

bernie1227
10-15-2012, 07:28 AM
I think that would probably because you are using a click for a select. A better way would be to take away the information depending on the value of the option selected.

Kage Kazumi
10-15-2012, 07:30 AM
I think that would probably because you are using a click for a select. A better way would be to take away the information depending on the value of the option selected.

That would look like?

bernie1227
10-15-2012, 08:02 AM
to give you some idea, it would look like:


$(window).load(function() {
$('#book').change(function() {
$(".wrapper:not(:has(img.book))").remove();
});
});

Kage Kazumi
10-15-2012, 08:07 AM
This is irritating...did not work.

~Kage

bernie1227
10-15-2012, 08:12 AM
The website hasn't been updated:


$(window).load(function() {
$('#book').change(function() {
$(".wrapper:not(:has(img.book))").remove();
});
});

try that modification, and check the paths to the divs.

as keyboard said, you will need to choose the right paths first of all

keyboard
10-15-2012, 08:15 AM
On the test page you've set up, which of the three <select>s are you trying to run this code on?
Also, what is class of the divs that you want to remove if they don't contain a certain class (and what is that certain class).
Then I can give you an example that should work.

bernie1227
10-15-2012, 08:22 AM
updated with divs and selects on the website:


$(window).load(function() {
$('#filterBox1').change(function() {
$(".tb-container:not(:has(img.book))").remove();
});
});

remember to change the highlighted part.

Kage Kazumi
10-15-2012, 08:33 AM
The website hasn't been updated:


$(window).load(function() {
$('#book').change(function() {
$(".wrapper:not(:has(img.book))").remove();
});
});

try that modification, and check the paths to the divs.

as keyboard said, you will need to choose the right paths first of all


I tried it local host. However, it not change on live host. Perhaps I should clarify what I need the dropdown selection options to do:

I need jQuery to do the following function when you SELECT an option from a form Dropdown selection...

When a person selects Windows in drop down it will hide all DIVs with the class of .container that do not have the class .windows in it.

bernie1227
10-15-2012, 08:57 AM
like I mentioned on a thread you started previously, take a look at something like:
http://jsfiddle.net/cqDES/
or
http://jsfiddle.net/JSyLV/1/
they are probably more usefull for what you want to do.

Kage Kazumi
10-15-2012, 09:09 AM
like I mentioned on a thread you started previously, take a look at something like:
http://jsfiddle.net/cqDES/
or
http://jsfiddle.net/JSyLV/1/
they are probably more usefull for what you want to do.

Which neither of them is what I want to do or am trying to do. Thanks any way...

jscheuer1
10-15-2012, 09:15 AM
http://www.appelsiini.net/projects/chained

bernie1227
10-15-2012, 09:23 AM
Which neither of them is what I want to do or am trying to do. Thanks any way...

Both of them are what you are trying to do. Displaying content based on the selected option in a drop down, similar to what John has posted.

Kage Kazumi
10-15-2012, 09:30 AM
Alright. I got it to work with:



$(window).load(function() {
$('#filterBox1').change(function() {
$(".tb-container:not(:has(img.windows))").remove();
});
});


Turns out my issue was:



$('#windows').change(function() {


THanks for the help.

jscheuer1
10-15-2012, 01:11 PM
See also:

http://jsfiddle.net/jscheuer1/FhkNG/1/