Question

I am not sure if my code is correct but I am trying to run some checks on a specific element but my counters are not working – my fields are not hiding.

//get all fields, some could be text, text area, checkbox, radio...

$(".my-field").each(function(i) {
var wrapper = this;

//check if the text box has a vaule, this callback here is not working/ correct?

$(wrapper).find("input:text", function() {
                if ($(this).val() != "" || $(this).val().length > 0) {
                    hidden++;
                    $(wrapper).find(".field-content").hide();
                    $(wrapper).addClass("hide");
                } else {
                    visible = visible + 1;
                }
            });
});

My Html below is 1 field (one div shown below) they are all wrapped inside a div with other fields

<div data-field-type="Text" data-field-id="1" class="display-wrapper my-field">
        <div class="field-header">
            <span>name:
                xyz</span> | <span>
                    text field</span>
        </div>
        <div class="field-content">
            <div class="editor-label">
                <p class="clear">
                    some description...</p>
            </div>

<div class="editor-field">
    <input type="text" value="iojhiojio" name="1" maxlength="100" id="field-1" class="field-bigtext">
</div>
            <br>
        </div>
        <div style="display: none;" class="field-error-wrapper">

        </div>
    </div>

My Question, is this possible with jquery:

$(wrapper).find("input:text", function() {
.. some code
});

Answer 1

You’re probably looking for .each(), in order to do something to each element.

$(wrapper).find("input:text").each(function() {
    if ($(this).val() != "" || $(this).val().length > 0) {
        hidden++;
        $(wrapper).find(".field-content").hide();
        $(wrapper).addClass("hide");
    } 
    else {
        visible++;
    }
});

.find() only does one thing: find objects inside the element you’re running it on which matches a given selector/object.

Edit: having read your comment, you said you only want to do something to a single element. So just store what you get in .find() in a variable, and do stuff with it.

var inputElem = $(wrapper).find('input:text');
if (inputElem.val() != "" || inputElem.val().length > 0) {
    hidden++;
    $(wrapper).find('.field-content').hide();
    $(wrapper).addClass("hide");
} 
else {
    visible++;
}