CODEWITHSUNDEEP
javascriptjquery
Alex
Alex

Reputation: 77

Sort elements by ( classname ) via jQuery

I want to sort and handle my spans who has class ( yes )

I have a random counter , if the number > 50

The <span class="yes"></span> will created

else <span class="no"></span> will created .

Look at my code :

<div id="div1">
    <input id="btn" value="click" type="button" style="' + 'text-align: center;width: 50px"/>
    <div id="div2">
    </div>
    <div id="div3">
    </div>
</div>

and jQuery:

<script>
    $("#btn").click(function () {
        setInterval(function () {
            var number = 1 + Math.floor(Math.random() * 9 + Math.random() * 100);
            $('#div2').html(number);
            var $div3 = $("#div3");
            if (number > 50) {
                var span1 = $('<span />').addClass('yes');
                var getYesClass = $(".yes");
                span1.appendTo($div3);
            } else {
                var span2 = $('<span />').addClass('no');
                var getNoClass = $(".yes");
                span2.appendTo($div3);
            }
        }, 1000);

    });
</script>

Now my biggest problem is: as you know the span's tags will created by random at the source of code, but how can sort and handle it?

I want a condition:

if 5 span tags with class Yes are made (in a row and close to each other)

do something ....

`alert("5 span's with same class are created in a row and close to each other")`

I think we have to use find() or next() or ... but i cant make it :(

last Example : 


  <span class="no"></span>
    ***<span class="yes"></span>
    <span class="yes"></span>
    <span class="yes"></span>
    <span class="yes"></span>
    <span class="yes"></span>***
    <span class="no"></span>
    <span class="yes"></span>
    <span class="yes"></span>
    <span class="yes"></span>
    <span class="no"></span>

look at the bold area (stars) , 5 span classes in a row and close to each other ,

please learn me ;

Upvotes: 0

Views: 98

Answers (2)

PeterKA
PeterKA

Reputation: 24638

You can use the .prevUntil() method, and then check the .length property to see how many spans are in the collection:

function checkSpan( $span ) {
    if( $span.prevUntil('.no','.yes').length === 4 ) {
        console.log( "5 span's with same class are created in a row and close to each other" );
    }
}

NOTE

Please note that because of === 4 the function will only output the message when exactly 5 span.yes elements are consecutive, but the message will not be output when 6 or more span.yes elements are consecutive.

DEMO

$("#btn").click(function () {
        setInterval(function () {
            var number = 1 + Math.floor(Math.random() * 9 + Math.random() * 100);
            $('#div2').html(number);
            var $div3 = $("#div3");
            if (number > 50) {
                var span1 = $('<span />').addClass('yes');
                var getYesClass = $(".yes");
                span1.appendTo($div3);
                checkSpan( span1 );
            } else {
                var span2 = $('<span />').addClass('no');
                var getNoClass = $(".yes");
                span2.appendTo($div3);
            }
        }, 1000);

    });
    
    function checkSpan( $span ) {
        if( $span.prevUntil('.no','.yes').length === 4 ) {
            console.log( "5 span's with same class are created in a row and close to each other" );
        }
    }
.yes, .no {
    display: inline-block;
    width: 15px;
    height: 15px;
}

.yes {
    background-color: green;
}

.no {
    background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
    <input id="btn" value="click" type="button" style="' + 'text-align: center;width: 50px"/>

    <div id="div2">


    </div>
    <div id="div3">

    </div>
</div>

You can use .addBack() so that the current span is added to the collection, in which case the condition would have === 5 instead of === 4:

function checkSpan( $span ) {
    if( $span.prevUntil('.no','.yes').addBack().length === 5 ) {
        console.log( "5 span's with same class are created in a row and close to each other" );
    }
}

DEMO

$("#btn").click(function () {
        setInterval(function () {
            var number = 1 + Math.floor(Math.random() * 9 + Math.random() * 100);
            $('#div2').html(number);
            var $div3 = $("#div3");
            if (number > 50) {
                var span1 = $('<span />').addClass('yes');
                var getYesClass = $(".yes");
                span1.appendTo($div3);
                checkSpan( span1 );
            } else {
                var span2 = $('<span />').addClass('no');
                var getNoClass = $(".yes");
                span2.appendTo($div3);
            }
        }, 1000);

    });
    
    function checkSpan( $span ) {
        if( $span.prevUntil('.no','.yes').addBack().length === 5 ) {
            console.log( "5 span's with same class are created in a row and close to each other" );
        }
    }
.yes, .no {
    display: inline-block;
    width: 15px;
    height: 15px;
}

.yes {
    background-color: green;
}

.no {
    background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
    <input id="btn" value="click" type="button" style="' + 'text-align: center;width: 50px"/>

    <div id="div2">


    </div>
    <div id="div3">

    </div>
</div>

Upvotes: 1

dale landry
dale landry

Reputation: 8600

You can use a variable that is set to 1 and increment it in your conditional that sets the class to yes, if the no conditional runs it resets the value back to 1. Then have a conditional that checks the value and if it is greater than or equal to 5, you hvae five in a row.

$("#btn").click(function() {
let num = 1;
  setInterval(function() {
    var number = 1 + Math.floor(Math.random() * 9 + Math.random() * 100);
    $('#div2').html(number);
    var $div3 = $("#div3");
    if (number > 50) {
      var span1 = $('<span />').addClass('yes');
      var getYesClass = $(".yes");
      span1.appendTo($div3);
      num++;
    } else {
      var span2 = $('<span />').addClass('no');
      var getNoClass = $(".yes");
      span2.appendTo($div3);
      num = 1;
    }
    console.log(num)
    // if you want to constrain to only 5, then set to ===
    if (num >= 5) {
      console.log('we have 5 or more in a row')
    }

  }, 1000);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">
  <input id="btn" value="click" type="button" style="' + 'text-align: center;width: 50px" />

  <div id="div2">


  </div>
  <div id="div3">

  </div>
</div>

Upvotes: 1

Related Questions