If multiple intervals have different values, display a warning

Question

I have a list of products (e.g. cart) created by JavaScript / jQuery. In the list, all items must belong to the same main category.

For example, you cannot have an item from INDUSTRIAL-A and INDUSTRIAL-B in the same list.

HTML example:

<div id="{{divId}}" class="cart__row wishl-row" data-item="{{itemId}}" data-tags="{{product.tags}}">
    <div class="grid--full cart__row--table-large">
        <div class="grid__item large--three-fifths">
            <div class="grid">
                <div class="grid__item one-third">
                    <a href="{{product.url}}?variant={{variant.id}}" title="{{product.title}}" class="cart__image">
                        <img src="{{featuredImage}}" alt="{{product.title}}" />
                    </a>
                </div>
                <div class="grid__item two-thirds">
                    <a href="{{product.url}}?variant={{variant.id}}" title="{{product.title}}" class="h4 cart__product-name">{{{product.title}}}</a>
                    <ul>
                        <li>
                            <span class="variant-option-key">{{this.name}}:</span> {{this.value}}
                        </li>
                    </ul>
                    <span class="variant-title">{{variantTitle}}</span>
                    <ul>
                        <li>
                            <span class="property-key">{{@key}}:</span> {{this}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="grid__item large--two-fifths">
            <div class="grid--full cart__row--table">
                <div class="grid__item two-thirds text-center">
                    <p class="h4 cart__product-name">
                        <span class="categori" style="font-weight: 600;">{{ product.tags }}</span>
                        <br />
                        <span class="category">{{ product.tags }}</span>
                    </p>
                </div>
                <div class="grid__item one-third text-right wishl-item-actions">
                    <a href="#" class="wishl-del" data-item="{{itemId}}" data-item-title="{{product.title}}">{{deleteLabel}}</a>
                </div>
            </div>
        </div>
    </div>
</div>

<span>with text that cannot be duplicated, has a class attribute of the category. If each item in the list has INDUSTRIAL-A, then no alert. If there is INDUSTRIAL-A and INDUSTRIAL-B, then it works alert.

I have this code right now, but it gives alert, even if all the elements have INDUSTRIAL-A:

var array = ["INDUSTRIAL-A", "INDUSTRIAL-B"];

$(array).ready(function () {

    // Using :contains()
    $("span.categori:contains(" + this + ")").ready(function() {
        setTimeout(function() {
            alert("You have items from different category grades.");
        }, 1);
    });
});

I also tried this code:

var array = ["INDUSTRIAL-A", "INDUSTRIAL-B"];

$(array).ready(function () {

    // Using :filter()
    $("span.categori:filter(" + this + ")").ready(function() {
        setTimeout(function() {
            alert("You have items from different category grades.");
        }, 1);
    });
});

Any help would be greatly appreciated. Thank!

Answer 1

id categori ! , true false!!!

function checkForSameIndustry(){
    var span_text_array = [];
    $("span[id=categori]").each(function(index, elem){
        span_text_array.push($(this).text());
    });
    if(span_text_array.length > 0){
        return (!!span_text_array.reduce(function(a, b){ return (a === b) ? a : NaN; }));
    }else{
        return true;
    }
}

, !

Answer 2

, . , :

$(function() {
  var array = ['INDUSTRIAL-A', 'INDUSTRIAL-B'];

  array.forEach(function(t) {
    $("span.categori:contains(" + t + ")").each(function() {
      setTimeout(function() {
        alert('You have items from different category grades.');
      }, 1);
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="categori">INDUSTRIAL-A</span>
<span class="categori">INDUSTRIAL-C</span>