Question 172029 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can I create a jQuery iterating function?

I have the following function which hides or shows the input and label of a field depending on the value of a select field:

function handle_select_change(obj) {
        var selectField = jQuery(obj);
        var selectedValue = selectField.val();
        var textareaField = obj.parents('.cheryr-ui-repeater-content-box').find('textarea');


        if (selectedValue !== "multiple-choice") {
            textareaField.css("display", "none");
            textareaField.siblings().css("display", "none");

        } else {
            textareaField.val(""); 
            textareaField.css("display", "block");
            textareaField.siblings().css("display", "block");
        }   
        
    }

This function applies for several forms inside the same page.
I am trying to trigger this function as soon as the document is ready so that it verifys the value of the select field in each form.

Inside a document ready function i was calling my function this way:

handle_select_change(jQuery('.cheryr-ui-repeater-content-box select'));

The selector above is an object where each index of the object is a select field. So if i have forms in my page, i will have an object of length 5 being each index the select field to the corresponding form. How can i iterate the object and pass it to my function when it is triggered?

Tags:

2

Answers


  1. 0

    Use a selector to find all the elements, then loop over them to call the function.

    Something like so:

    const elements = document.querySelectorAll('.cheryr-ui-repeater-content-box > select');
[ ...elements ].forEach(e => handle_select_change(e));
    Login or Signup to reply.
  2. 0

    First, as a side note, for questions like this PLEASE include your HTML! It’s related to the question and very helpful to answerers

    The very first line of your function wraps whatever was passed in with jQuery(obj) so when you call it you only need to pass the selector string, like this:

    handle_select_change('.cheryr-ui-repeater-content-box select');

    You just need to have a change event for the selected elements, and you can also simplify some code by taking advantage of jQuery’s chained events and the .hide() and .show() methods instead of directly setting css display properties.

    I had to take a guess at some HTML structure since you didn’t include any.

    function handle_select_change(obj) {
  var selectField = jQuery(obj);

  //add a change event for when the value of the select changes
  selectField.change(function(){
    var selectedValue = this.value;
    var textareaField = $(this).parents('.cheryr-ui-repeater-content-box').find('textarea');

    if (selectedValue !== "multiple-choice") {
      textareaField.add(textareaField.siblings())
                   .hide();
    } else {
      textareaField.val("")
                   .add(textareaField.siblings())
                   .show()
    }
  });

  //Trigger the above change event immediately
  selectField.trigger('change')
}

//----------------

$(function(){
  handle_select_change('.cheryr-ui-repeater-content-box select');
});
    .cheryr-ui-repeater-content-box {
  border: 1px solid #CCC;
  margin-bottom: 10px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cheryr-ui-repeater-content-box">
  <select>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="multiple-choice">Multiple Choice</option>
  </select>
  <div>
    <label>Some text here</label>
    <textarea></textarea>
  </div>
</div>

<div class="cheryr-ui-repeater-content-box">
  <select>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="multiple-choice">Multiple Choice</option>
  </select>
  <div>
    <label>Some text here</label>
    <textarea></textarea>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search