how can convert jquery code to functions?

Question

I have multi html block with same code like this:

<div id="up1">
   <input id="sub1" />
</div>


<div id="up2">
   <input id="sub2" />
</div>

.
.
.

<div id="upn">
   <input id="subn" />
</div>

for each html these block I have same jquery code (with own id for each of them)

like this:

$(document).on("change", "#up1",function() {
    e.preventDefault();
    ... some code ...
})); 

$(document).on("change", "#up2",function() {
    e.preventDefault();
    ... some code ...
})); 
.
.
.

$(document).on("change", "#upn",function() {
    e.preventDefault();
    ... some code ...
}));

this is my qestion

how to avoid repeating code?..

maybe u suggest me I must use class instead id,But it's not my answer.I want use only id.

I must use id,not class... because I want print result (or send data) on it's block.

seems I must use a function, but how can I call them in a function?

for example is this valid?

function myfunction(id1,id2) {
$(document).on("change", "#up1",function() {
    e.preventDefault();
    ... some code ...
})); 

}


myfunction('up1','sub1');
myfunction('up2','sub2');
myfunction('up3','sub3');

"because I want print result (or send data) on it's block" ... doesn't mean you need to use id. Common misconception issue when learning but there are numerous ways to traverse within instances of a class — charlietfl
– charlietfl, Commented May 14, 2016 at 19:51
You can and you should use various IDs, but same class on those elements. — skobaljic
– skobaljic, Commented May 14, 2016 at 19:58

krivtom · Accepted Answer · 2016-05-14 20:11:24Z

Why don't you use multiple selectors:

$(document).on("change", "#up1, #up2, #upn", function() {
    e.preventDefault();
    ... some code ...
}));

In this case if any of elements up1 ... upn is changed the event handler will be fired. Additionally you need to access the item that was changed by using $(this) instead of accessing it directly by ID.

To access the sub element you can use some other selector based on your parent element, for example:

$(document).on("change", "#up1, #up2, #upn", function() {
    e.preventDefault();
    var sub = $(this).find('input').eq(0);  // find first input element inside changed element
}));

Or if it possible change your HTML structure not to use ID for sub items and use class instead:

<div id="up1">
   <input id="sub1" class="sub" />
</div>

In this case you can use class selector:

$(document).on("change", "#up1, #up2, #upn", function() {
    e.preventDefault();
    // find first element inside changed element that has class 'sub':
    var sub = $(this).find('.sub').eq(0);      
}));

Stu Furlong · Accepted Answer · 2016-05-14 19:56:07Z

1

You can always use a class to target multiple items:

JS

$(document).on("change", ".sub", function() {
    e.preventDefault();
    ... some code ...
}));

HTML

<div id="up1" class="sub">
   <input id="sub1" />
</div>


<div id="up2" class="sub">
   <input id="sub2"  />
</div>

.
.
.

<div id="upn" class="sub">
   <input id="subn"  />
</div>

You can also do something like this:

function myFunction(id1,id2){
   ... code ...
}

$(document).on('change', '.sub', function(e){
    var thisID = $(this).prop('id'),
        inputID = $(this).find('input').prop('id');

    e.preventDefault();

    myFunction(thisID, inputID);
});

Also, just making sure you want your change event on the div and not the input?

answered May 14, 2016 at 19:56

Stu Furlong

3,6576 gold badges37 silver badges50 bronze badges

Comments

yezzz · Accepted Answer · 2016-05-14 21:12:26Z

1

Use css attribute selector to target all divs whose id starts with up:

$(document).on("change", "div[id^='up']", function(e){
  e.preventDefault();
  console.log("Something changed! ID of div: "+ $(this).attr("id") ); 
});

edited May 14, 2016 at 21:12

answered May 14, 2016 at 20:53

yezzz

3,0381 gold badge12 silver badges20 bronze badges

Comments

Pankaj · Accepted Answer · 2016-05-14 20:35:52Z

0

You don't have to write ids to access the elements. Class can suffice too and can make your code look very small. If HTML is like:

<div class='input-container'>
    <input type=text />
</div>
<div class='input-container'>
    <input type=text />
</div>
<div class='input-container'>
    <input type=text />
</div>

Then jQuery can be written as:

$(document).ready(function(){
    $(document).on('change', '.input-container input[type="text"]', function(){
        //your code
    });
});

answered May 14, 2016 at 20:35

Pankaj

9668 silver badges16 bronze badges

Collectives™ on Stack Overflow

how can convert jquery code to functions?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related