jQuery function with each

Question

In a document, I have about 25 DIVs which contain forms with various names. The DIVs all have the same class name and look like this:

<div class="swoop" style="display:none">
  <form name="myFormXYZ" method="post">
    <input name="caption" type="hidden" value="19">
  </form>
</div>

I want to write jQuery code which will check all DIVs with the class of "swoop" and if any DIVs contain an input field named "caption" which has a value of x, then the display property of those DIVs should be set to "block". x will be an integer between 1 and 1000.

So far I have come up with this:

$('.swoop').each(function() {
    var capt = $( ? ? ? ).attr('value()');
    if (capt == x) {$(this).css.(display','block')}
});

Can the jQuery function even iterate through the DIVs whose display is set to none?

An element with display: none is not rendered, but it is still in the DOM. So yes, $('.swoop') will select all elements with class .swoop. — Felix Kling
– Felix Kling, Commented Jan 24, 2013 at 21:42

Felix Kling · Accepted Answer · 2013-01-24 21:49:01Z

7

Yet another way:

$('.swoop').has('input[name=caption][value=' + x + ']').show();

This uses attribute selectors instead to find the input elements with a certain value. .has filters the elements by those that have descendants matching the passed selector and .show should be self-explanatory.

edited Jan 24, 2013 at 21:49

answered Jan 24, 2013 at 21:43

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jason M. Batchelor Over a year ago

Yeah, sorry, that was my bad... my display made it look like there was a space btw the selectors.

Commata Over a year ago

Already six answers! Thank you, Felix, @Omar and @Musa! I will not have time until tomorrow to check these out.

Commata Over a year ago

Thank all six of you for answering my post. I wrote thank you notes as comments to all six but they have all disappeared. ?

Commata Over a year ago

This works perfectly, chosen as the accepted answer for being the shortest solution, also teaching me something about filters that was not in my book. Thank you!

DiverseAndRemote.com · Accepted Answer · 2013-01-24 21:43:04Z

1

you need:

$('.swoop').each(function() {
    var capt = $('input[name=caption]', this).val();
    if (capt == x) {$(this).css.('display','block')}
});

edited Jan 24, 2013 at 21:43

answered Jan 24, 2013 at 21:40

DiverseAndRemote.com

20k10 gold badges65 silver badges75 bronze badges

1 Comment

Commata Over a year ago

Funny thing, the code in your answer looks to me to be exactly the same as the answer of Matt just above, but my MSIE debugger gives a different error message for your solution: 'expected identifier'. I know, the MSIE debugger is usually not worth much... Sorry that I don't have time to find out if the problem is with my code.

Musa · Accepted Answer · 2013-01-24 21:49:20Z

1

$('.swoop input[name="caption"]').each(function() {
    var capt = $(this).val();
    if (capt == x) {
        $(this).closest('.swoop').css('display','block')
    }
});

edited Jan 24, 2013 at 21:49

answered Jan 24, 2013 at 21:43

Musa

97.9k17 gold badges123 silver badges144 bronze badges

2 Comments

Felix Kling Over a year ago

input[caption] won't select any element. No element has an attribute caption.

Commata Over a year ago

Thanks for your suggestion! It was the only one of those here that worked for me, except for the first one above, which I accepted as the answer because it was the shortest.

Matt · Accepted Answer · 2013-01-25 14:52:52Z

1

var someInt = 7;    
$('.swoop').each(function() {
    var capt = $('input[name=caption]', this).val());
    if (capt == someInt) {$(this).css('display','block');}
});

edited Jan 25, 2013 at 14:52

answered Jan 24, 2013 at 21:41

Matt

1,9214 gold badges30 silver badges51 bronze badges

3 Comments

Commata Over a year ago

Thank you, Matt. I will not have time until tomorrow to try out these solutions!

Commata Over a year ago

My MSIE debugger kept saying "expected ;" but I couldn't find where one was missing.

Matt Over a year ago

@user1781623, I found it. It was missing in the "if" block. Thanks for the heads up.

Guffa · Accepted Answer · 2013-01-24 21:42:49Z

0

Yes, jQuery can access elements even if they are hidden.

Use the current item as context in the jQuery call to look for elements inside it. Use the val method to get the value of the input, and you would want to parse the value to turn the string into a number:

var capt = parseInt($('input[name=caption]', this).val(), 10);
if (capt == x) { $(this).css('display','block'); }

answered Jan 24, 2013 at 21:42

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

jmorc · Accepted Answer · 2013-01-24 21:55:43Z

0

var v = 19;    
$('.swoop input[name=caption]').each(function () {
            var capt = $(this).attr('value');
            if (capt == v) { 
            $(this).parents("div").andSelf().css('display', 'block');
            $(this).attr({ type: '' }); }
        });

answered Jan 24, 2013 at 21:55

jmorc

5701 gold badge3 silver badges14 bronze badges

1 Comment

Commata Over a year ago

Trying this out, got the error message "Type property can't be changed". Sorry, no time to troubleshoot whether the problem is in my code or not, since the first answer above worked for me.

Collectives™ on Stack Overflow

jQuery function with each

6 Answers 6

4 Comments

1 Comment

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related