CODEWITHSUNDEEP
jqueryeventsloopshtmlbind
itsbalur
itsbalur

Reputation: 1002

jquery loop through divs and bind events

I have the below html. Could you tell me how do I use jquery to loop through each query_chunk divs and bind different events to each element inside the div?

I know I can use the .each function, but am stuck on the syntax. Any ideas appreciated.

                <div id="query_chunk_1">
                    <select class="parameter" id="parameter_1" name="parameter_1">
                        <option title="Keyword Anywhere" value="Anywhere">Keyword Anywhere</option>
                        <option title="Author or Contributor" value="Contributor">Author or Contributor</option>
                        <option title="Title" value="Title">Title</option>
                        <option title="Subject" value="Subject">Subject</option>
                    </select>
                    <input id="keyword_1" name="keyword_1" type="text" />
                    <a href="#"  id="remove_1"  title="Remove">[-]
                        </a>
                </div>
                <div id="query_chunk_2">
                    <select class="parameter" id="parameter_2" name="parameter_2">
                        <option title="Keyword Anywhere" value="Anywhere">Keyword Anywhere</option>
                        <option title="Author or Contributor" value="Contributor">Author or Contributor</option>
                        <option title="Title" value="Title">Title</option>
                        <option title="Subject" value="Subject">Subject</option>
                    </select>
                    <input id="keyword_2" name="keyword_2" type="text" />
                    <a href="#"  id="remove_2"  title="Remove">[-]
                        </a>
                </div>

Upvotes: 0

Views: 2160

Answers (1)

Orson
Orson

Reputation: 15431

Keyword Anywhere Author or Contributor Title Subject [-] 

            <div id="query_chunk_2" class="con">
                <select class="parameter" id="parameter_2" name="parameter_2">
                    <option title="Keyword Anywhere" value="Anywhere">Keyword Anywhere</option>
                    <option title="Author or Contributor" value="Contributor">Author or Contributor</option>
                    <option title="Title" value="Title">Title</option>
                    <option title="Subject" value="Subject">Subject</option>
                </select>
                <input id="keyword_2" name="keyword_2" type="text" />
                <a href="#"  id="remove_2"  title="Remove">[-]
                    </a>
            </div>


$(function() {
     $("div.con").each(function() {
          $(this).live('eventname', functionname);
     });
});

Also take note that i added classes to the divs. You can also bind to an event using .bind instead of .live 

$(this).bind('eventname',function(event){alert('Hi there!');});

Also note the in the first example i used "functionname where it is an actual function on your script file but in the bind case i embedded the function in the syntax. You can use any. You can even have;

$(this).live('eventname',function(event){alert('Hi there!');});

Update #1

To bind to individual controls use:

$(function() {
         $("div.con").each(function() {
              $(this).find("elementId").live('eventname', functionname);
         });
    });

Upvotes: 4

Related Questions