Clever Geek Handbook

JQuery function with each

I have about 25 DIVs in the document, which contain forms with different names. All DIVs 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 that will validate all DIVs with class "swoop" and if any DIVs contain an input field named "caption" which has a value x then the display property of those DIVs should be displayed block ". X will be integer a number from 1 to 1000.

So far I have come up with the following:

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

Can a jQuery function iterate through a DIV whose display is set to none?

+3


source to share


6 answers


Another way:

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


Instead, an attribute selector is used to find input elements with a specific value. .has

filters elements by those that have children that match the passed selector and .show

should be human-readable.

+7


source


you need:



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


source 


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


source 


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


source


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

Use the current element as context in your jQuery call to find elements within it. Use a method val

to get the value of the input, and you will 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'); }
0


source 


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: '' }); }
        });
0


source






More articles:


All Articles