function create() { var num = 15; for (var i = 0; i < num; i++) { var div = document.createElement('div'); div.className = "ava"; div.onclick = function(i) { return function() { alert(i); } }(i); div.innerHTML = '<strong>' + i + '</strong>'; div.setAttribute("id", i); calb.insertBefore(div, calb.childen); test(i); } } 
 .ava { opacity: 0; cursor: pointer; text-align: center; float: left; width: 65px; margin: 10px; padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c765f; background-color: #C7F7B7; transition: 0.3s; } .ava:hover { transform: scale(1.1); text-align: center; } 
 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script> function test(num) { $('#' + num).animate({ opacity: '1' }, 5000); } </script> </head> <body> <div id="calb"></div> <script> create(); </script> </body> </html>

The following codes are available:

CSS:

 .ava { opacity:0; cursor: pointer; text-align: center; float: left; font-size: 18px; width: 65px; margin: 10px; padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c765f; background-color: #C7F7B7; transition: 0.3s; } .ava:hover { transform: scale(1.1); text-align: center; }

Javascript:

 function create() { var num = 15; for(var i = 0; i < num; i++) { var div = document.createElement('div'); div.className = "ava"; div.onclick = function(i) { return function() { alert(i); }}(i); div.innerHTML = '<strong>' + i + '</strong>'; div.setAttribute("id", i); calb.insertBefore(div, calb.childen); test(i); } }

Jquery:

 function test (num) { $('#'+num).animate({opacity:'1'},5000); }

As a result, we have: - the cursor is not pointer, - it does not click, - there is no animation on hover.

The problem appeared after sewing on jQuery. help ...

ps: What should look like, or rather be written, similar code that performs the functions that this should perform? Thank!

  • Pay attention to the button with the hint "Code snippet on ..." in the question editing mode toolbar. Using this tool, you can create a working sample code that demonstrates your problem. - Igor

3 answers 3

Using jQuery 2.1.1 and without violating the HTML specification regarding the formation of id DOM elements ( https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html ).

 function create() { var num = 15; for (var i = 0; i < num; i++) { var div = document.createElement('div'); div.className = "ava"; div.onclick = function(i) { return function() { alert(i); } }(i); div.innerHTML = '<strong>' + i + '</strong>'; div.setAttribute("id", "div" + i); calb.insertBefore(div, calb.childen); test(i); } } function test(num) { //console.log($('#div' + num).length); $('#div' + num).animate({ opacity: '1' }, 5000); } create(); 
  .ava { opacity: 0; cursor: pointer; text-align: center; float: left; width: 65px; margin: 10px; padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c765f; background-color: #C7F7B7; transition: 0.3s; } .ava:hover { transform: scale(1.1); text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="calb"></div>

  • so, and here it works .... What is the reason? - Vladimir Alexandrov
  • Posted on top. - Igor
  • Thank you so much! - Vladimir Alexandrov

The code is executed on average 10 ms. The "Igor" test code - runs an average of 18-20 ms

To optimize time, I removed the work with the DOM and the for loop works faster. Use 1 team

 place.find('.ava').animate({ opacity: '1'}, 5000);

Instead of calling a function from a cycle. The result is the same + less calls, lower execution speed. See:

 console.log()

Example: jsFiddle

 var a = $.now(), place = $('[data-type="square"]'); create(); place.on('click',function(){ alert($(this).index); }); place.find('.ava').animate({ opacity: '1' }, 5000); b = $.now(); console.log('time:'+(ba)); function create() { var num = 15, result = ''; for (var i = 0; i < num; i++) { result += '<div class="ava" id="div'+i+'"><strong>'+i+'</strong></div>' } place.append(result); } 
  .ava { opacity: 0; cursor: pointer; text-align: center; float: left; width: 65px; margin: 10px; padding: 15px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c765f; background-color: #C7F7B7; transition: 0.3s; } .ava:hover { transform: scale(1.1); text-align: center; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="calb" data-type='square'></div>

  • Thank! Very interesting option, there is something to learn) I have new questions, how during the creation of elements using ajax to find out in the database which flowers is an element? Or can I use a post request via php? Do not tell me what you can read specifically on this topic, but everything that I found is blurry and not for a beginner) - Vladimir Alexandrov
  • Decompose complex tasks into smaller ones. The code for these tasks should be as versatile as possible ... First, create a result for your request on the backend color. - Andrew

Error in syntax if not mistaken:

According to the rules you need to assign ID in quotas like here $("#num") and as you see, when you take the num parameter, you get this way: $(#num) which is no longer correct ...

try this:

 $("\"#"+num+"\"").animate({opacity:'1'},5000);
  • The problem is not with this, everything works here), but it’s problematic to put all this into the “Code Fragment on ...”, but now I will try) - Vladimir Alexandrov