jQuery Forum

I am trying to set the value of the last input field in a group, to equal the values of its siblings. In this scenario, users can duplicate the group.

What I have tried so far does not work properly. If user duplicates the fields, only the last group works. Any ideas on how I can achieve this?

Please see code here on fiddle.

I am working on a live validation function. The problem is that the aftermath of the conditions in the function executes executes before the last part is met. The entry validation indicator should not turn green until the conditions are met, however this is not the case.

The indicator turns green after the third condition is met. It should not, until all conditions are met. Any suggestions on how I can solve this problem.

1. $(".box").each(function () {
2. $(".box").click(function () {
3. $(this).removeClass("retain").removeClass("back");
4. $(this).addClass("back").delay(1000).queue(function(){
5.     $(this).removeClass("back").dequeue().addClass("retain");
6. });
7. });
8. });

See complete working code on jsFiddle.

1. var adistance = $('article.about-me').offset().top -90,
2.  
3.     $window = $(window);
4.     $window.scroll(function() {
5.     if ( $window.scrollTop() >= adistance ) {
6.          $("li.active").removeClass("active");    
7.          $('li[href$="about-me"]').addClass("active");
8.     }
9.    });
10.  var edistance = $('article.education').offset().top -90,
11.  
12.     $window = $(window);
13.     $window.scroll(function() {
14.     if ( $window.scrollTop() >= edistance ) {
15.          $("li.active").removeClass("active");    
16.          $('li[href$="education"]').addClass("active");
17.     }
18.    });
19.    var exdistance = $('article.experience').offset().top -90,
20.  
21.     $window = $(window);
22.     $window.scroll(function() {
23.     if ( $window.scrollTop() >= exdistance ) {
24.          $("li.active").removeClass("active");    
25.          $('li[href$="experience"]').addClass("active");
26.     }
27.    });
28.   var pdistance = $('article.portfolio').offset().top -90,
29.  
30.     $window = $(window);
31.     $window.scroll(function() {
32.     if ( $window.scrollTop() >= pdistance ) {
33.          $("li.active").removeClass("active");    
34.          $('li[href$="portfolio"]').addClass("active");
35.     }
36.    });

1. $('.um-member-name').each(function(i, obj) {
2. var n = $(this).attr('userEmail');
3.   $("h2").text(n);
4.         });

Any Ideas how I can solve this issue?

1.     $(document).on('touchend', function(){
2. $(".select2-search, .select2-focusser, #s2id_autogen4, .right [id*=focusser], .right [id*=autogen], .right [id*=foccused], .select2-search-choice-close").remove();
3. });

1. jQuery('.select2-chosen').bind('DOMSubtreeModified',function(event) {
2.     var newText = $(this).text();
3.     alert(newText); 
4.     if ($('.select2-chosen:contains("O")').length === 1) {     
5.     alert(newText);
6. }
7.     
8.     
9.     
10. });

I am trying to stop mobile keyboard from showing when the element on focus is a drop-down but it still does not work. My code looks like below. Any ideas how I can achieve this. The problem is only on mobile.

Please note that the HTML is structured the by author of the plugin that I am using. It is the "marital status field" on this page.

// jQuery

$("#s2id_autogen1").attr("readonly", "readonly");

// HTML

<div style="width: 100%; max-width: 1903px; display: block;" id="s2id_marital_status" class="select2-container um-form-field valid um-s1"><a href="javascript:void(0)" class="select2-choice select2-default" tabindex="-1"> <span id="select2-chosen-1" class="select2-chosen">Marital Status</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a>
    <label for="s2id_autogen1" class="select2-offscreen"></label>
    <input id="s2id_autogen1" aria-labelledby="select2-chosen-1" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text">
</div>

1. $('#snitchBox').each(function (index, value){
2.     $(document).ready(function () {
3.     $("#snitchBox").hide();
4.         $('select#reportReason').on('change', function() {
5.                                       
6.                        if ($(this).val() === 'Other') {
7.                            
8.                       $("textarea#snitchBox").show();
9.    
10.                         } else {
11.                            
12.                             $("textarea#snitchBox").hide();
13.                         }
14.                        
15.                         }).change();
16.             });
17.        
18.                 });

See on jsFiddle.

1.         <select title="" name="marital_status" id="marital_status">
2.             <option value=""></option>
3.             <option value="Dating">Dating</option>
4.             <option value="Divorced">Divorced</option>
5.             <option value="Married" selected="">Married</option>
6.             <option value="In a Committed Relationship">In a Committed Relationship</option>
7.             <option value="Single">Single</option>
8.             <option value="Separated">Separated</option>
9.             <option value="Widowed">Widowed</option>
10.         </select>
11. <h1>I believe in God</h1>

1. $(document).ready(function() {
2.         if ($('#marital_status option:slected').value == "Married") {
3.      $('h1').hide();
4. }   
5. });

Working on a point system that assigns points for every element with matching content in a group of search results. It works well when I compare the contents from .per-results to .myself, but it doesn't work when I do the comparison from .myself to .per-result.

When reversed, it still assigns points but it assigns the same amount of points for all .per-resultwhen it should differ. My code looks like below.

$(function() {
      $('.per-result').each(function() {
        var $matches = $('span', this).filter(function() { // Each item
            var texts = $(this).text();
            return $('.myself span').filter(function() { // Are there matches in .three?
                return $(this).text() === texts;
            }).length > 0;
        }).length;
        $('.theyRate', this).text(('They score me ' + $matches * 6 + ' Points' ));
    });
  
  
  
  //Reversing the point system
  
        var $matches = $('.myself span', this).filter(function() { // Each item
            var texts = $(this).text();
            return $('.per-result span').filter(function() { // Are there matches in .three?
                return $(this).text() === texts;
            }).length > 0;
        }).length;
        $('.iRate').text(('I score them ' + $matches * 6 + ' Points' ));

  
});

Link to the fiddle

1. // Alert session cookie starts here
2. jg(document).ready(function () {
3.     function closeBox() {
4.         var closeBox = jg('.alert-box:visible').hide();
5.         // - Notice how we pass a function and get an integer
6.         jg.cookie('Alert-closed', true, {
7.             path: '/'
8.         });
9.     }
10.     console.log('Alert-closed');
11.     // - Simply checks the alert box above
12.     if (jg.cookie('Alert-closed')) {
13.         console.log('Closing the alert box automatically...');
14.         closeBox();
15.     }
16.     // Close the box on click
17.     jg('.alert-switch').click(function () {
18.         closeBox();
19.     });
20. });

1. $(document).each(function () {
2.     var pMatch = $('ol li').map(function () {
3.         return $(this).text()
4.     })
5.     var sMatch = $('.three li').map(function () {
6.         return $(this).text()
7.     })
8.     $.each(pMatch, function (i, h) {
9.         if (h === sMatch[i]) {
10.             var uSp = $("ol li").eq(i).length * 10;
11.             $( "ol li:last-of-type" ).text( "" + uSp + " Points");
12.         }
13.     });

Jsfiddle link

1. $(document).each(function() {
2.     var pMatch = $('.one li').map(function(){
3.         return $(this).text()
4.     })
5. var sMatch = $('.two li').map(function() {
6.         return $(this).text()
7.     })
8. $.each(pMatch,function(i,h) {
9.    
10.     if (h===sMatch[i])
11.         
12.     $('.show-here').text('This is Working');
13.    
14.     else    
15.          
16.     $('.show-here').text('This is not Working');
17. });
18.    
19.    
20.    
21. });

Link to jsFiddle

1. $(document).each(function() {
2. var pMatch = $('.one li').contents();
3. var sMatch = $('.two li').contents();
4. if ($(pMatch === sMatch)) {
5.      
6.     $('.show-here').text('This is Working');
7.   }
8.     else {
9.        
10.     $('.show-here').text('This is not Working');
11. }
12.    
13. });

Here is a link to jsfiddle with the code.

1. <div id="main">
2. <div class="prev">Previous</div>
3. <div class="next">Next</div>
4. <div class="container active">One</div>
5. <div class="container">Two</div>
6. <div class="container">Three</div>
7. <div class="container">Four</div>
8. 
   
9. </div>

1. .prev, .next {
2. float: left;
3. color:blue;
4. font-size: 24px;
5. margin: 10px 0 50px 50px;
6. cursor:pointer;
7. width: 40%;
8. color: black;
9. }
10. .container {
11. width: 100%;
12. font-size: 70px;
13. margin-bottom: 20px;
14. 
    
15. }
16. .container {
17. display: none;
18. }
19. .container.active {
20. display: inherit;
21. }
22. 
    

1. $(".prev").on("click", function(){
2. $(".container.active").removeClass("active").prev().addClass("active");
3. var $prev = $('.container.active').removeClass('active');
4. if ($prev.length) {
5. $prev.addClass('active');
6. }
7. else {
8. $(".container:last").addClass('active');
9. }
10. 
    
11. });
12. $(".next").on("click", function(){
13. $(".container.active").removeClass("active").next().addClass("active");
14. var $next = $('.container.active').removeClass('active');
15. if ($next.length) {
16. $next.addClass('active');
17. }
18. else {
19. $(".container:first").addClass('active');
20. }
21. 
    
22. 
    
23. });
24. jQuery(document).ready(function(){
25. if ($('.container:nth-of-type(2)').is(':visible')) {
26. $('#main').css({'background' : 'red'});
27. }
28. else {}
29. });

1.   jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
2.     return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
3.     };
4. var max = $('div.faces').size();
5. var init = 0;
6. $("div.faces:not(:first)").hide();
7.  $(".lefter,.righter").click(function(){
8.    curr = init%max;
9.    next = ++init%max;
10.    $("div.faces").eq(next).add($("div.faces").eq(curr)).slideFadeToggle('slow');
11.     });

Here's a link to how is works on jsFiddle