Results 1 to 3 of 3

Thread: [RESOLVED] need to remove attribute

  1. #1

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Resolved [RESOLVED] need to remove attribute

    Hi.
    Some idiot has named a carousel div's with the same name.
    I' trying to distinguish between same names and remove an attribute.

    Here is the source part of interest:
    Code:
    <div id="select-center" class="choose-center">
        <div class="choose-day-slider">
            <div class="carousel slide multi-item-carousel" data-interval="false" id="cinemaSelection">
                <div class="carousel-inner">
                        <div class="item active">
        <div class="col-xs-2">
             <a class="datepick vc-selected  vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="99">
                 <span class="str-day">TEST CINEMA1</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="21">
                 <span class="str-day">Village ΑΤ ΤΗΕ MALL</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="01">
                 <span class="str-day">Village ΡΕΝΤΗ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="24">
                 <span class="str-day">Village ΦΑΛΗΡΟ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick   vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="26">
                 <span class="str-day">Village ΑΓ. ΔΗΜΗΤΡΙΟΣ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="03">
                 <span class="str-day">Village ΠΑΓΚΡΑΤΙ</span><br>
             </a>
        </div>
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="22">
                 <span class="str-day">Village Cosmos ΘΕΣΣ.</span><br>
             </a>
        </div>
    </div>
                        <div class="item ">
        <div class="col-xs-2">
             <a class="datepick  disableClick vc-cinema vc-process" style="cursor:pointer" data-vc-cinema="23">
                 <span class="str-day">Village ΒΟΛΟΣ</span><br>
             </a>
        </div>
    </div>
                </div>
                <a class="left carousel-control" data-slide="prev" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" data-slide="next" href="#cinemaSelection"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
    
                <div class="grey_fields">
                    Επιλογή Ημέρας
                </div>
                <div class="choose-day">
                    <div class="choose-day-slider">
                        <div id="theCarousel" class="carousel slide multi-item-carousel" data-interval="false">
                            <div class="carousel-inner">
                                    <div class="item active">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181009" id="date20181009">
                                                        <span class="str-day">09/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181010" id="date20181010">
                                                        <span class="str-day">10/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
    
    ...........etc
    As you can see there is 2 "choose-day-slider"

    Now the script part goes like this:
    Code:
     function selectDate(date) {
                console.log(date);
                var dateId = "#date" + date;
                var timeId = "#timeof" + date;
    /*            $('.vc-selected', '.choose-day-slider').removeClass('vc-selected');  this is the original script, this will remove the  vc-selected from all the carousel*/
    $("choose-day").find("choose-day-slider").removeClass('vc-selected');  /* this is what I am trying */
                $(dateId).addClass('vc-selected');  /* this will add the vc-selected to a specific button */
                $('.vc-selected', '.choose-hour-slider').removeClass('vc-selected');
                $('.choose-hour-slider').hide();
                $('.vc-instructions').hide();
                $('.dateSelected').show();
                $(timeId).show();
                var sessions = $('.timepicker:not(.not-available)', timeId);
                var firstSession = $(sessions[0]).attr('id');
                if (!!firstSession) {
                    selectHour(firstSession, false);
                } else {
                    $('#nextEnabled').hide();
                    $('#nextDisabled').show();
                }
            }
    I'm trying to remove vc-selected , the window of opportunity is that our idiot forgot to have the same name for the out class.
    So one class is named choose-center --> choose-day-slider and the other choose-day --> choose-day-slider .
    I'm trying to get the choose-day --> choose-day-slider and to work as would the $('.vc-selected', '.choose-day-slider').removeClass('vc-selected'); would work but only on the second carousel.
    When I run this it will only select any button I click and not remove the whole row as I'm trying to do.
    I have also tried .parent but it does not work .


    also tried this for the fun of it:
    $('.vc-selected', $('choose-day').find('choose-day-slider')).removeClass('vc-selected');
    $('.vc-selected', $('choose-day').find('choose-day-slider').find('#theCarousel').find('.item active').removeClass('vc-
    selected');

    nothing works.

    Thanks
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  2. #2

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: need to remove attribute

    OK. Plan B.
    If I cannot insert the class, how would it be possible for me to iterate through the main div and go through the inner elements and each time I find an element that has a class named "datepick" , I remove the class vc-selected from the same element.

    Something like pseudocode:
    Code:
    $('.choose-day').each(function(){
    
    if(element.hasclass(datepick) then (element.removeclass(vc-selected)
    }

    From this:
    Code:
    <div class="choose-day">
                    <div class="choose-day-slider">
                        <div id="theCarousel" class="carousel slide multi-item-carousel" data-interval="false">
                            <div class="carousel-inner">
                                    <div class="item active">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181009" id="date20181009">
                                                        <span class="str-day">09/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181010" id="date20181010">
                                                        <span class="str-day">10/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181011" id="date20181011">
                                                        <span class="str-day">11/10</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181012" id="date20181012">
                                                        <span class="str-day">12/10</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181013" id="date20181013">
                                                        <span class="str-day">13/10</span><br />
                                                        <span class="day-item">Σάββατο</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181014" id="date20181014">
                                                        <span class="str-day">14/10</span><br />
                                                        <span class="day-item">Κυριακή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181015" id="date20181015">
                                                        <span class="str-day">15/10</span><br />
                                                        <span class="day-item">Δευτέρα</span>
                                                    </a>
                                                </div>
                                    </div>
                                    <div class="item ">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181016" id="date20181016">
                                                        <span class="str-day">16/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181017" id="date20181017">
                                                        <span class="str-day">17/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181018" id="date20181018">
                                                        <span class="str-day">18/10</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181019" id="date20181019">
                                                        <span class="str-day">19/10</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181020" id="date20181020">
                                                        <span class="str-day">20/10</span><br />
                                                        <span class="day-item">Σάββατο</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181021" id="date20181021">
                                                        <span class="str-day">21/10</span><br />
                                                        <span class="day-item">Κυριακή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181022" id="date20181022">
                                                        <span class="str-day">22/10</span><br />
                                                        <span class="day-item">Δευτέρα</span>
                                                    </a>
                                                </div>
                                    </div>
                                    <div class="item ">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181023" id="date20181023">
                                                        <span class="str-day">23/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181024" id="date20181024">
                                                        <span class="str-day">24/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181025" id="date20181025">
                                                        <span class="str-day">25/10</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181026" id="date20181026">
                                                        <span class="str-day">26/10</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181027" id="date20181027">
                                                        <span class="str-day">27/10</span><br />
                                                        <span class="day-item">Σάββατο</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181028" id="date20181028">
                                                        <span class="str-day">28/10</span><br />
                                                        <span class="day-item">Κυριακή</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181029" id="date20181029">
                                                        <span class="str-day">29/10</span><br />
                                                        <span class="day-item">Δευτέρα</span>
                                                    </a>
                                                </div>
                                    </div>
                                    <div class="item ">
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181030" id="date20181030">
                                                        <span class="str-day">30/10</span><br />
                                                        <span class="day-item">Τρίτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181031" id="date20181031">
                                                        <span class="str-day">31/10</span><br />
                                                        <span class="day-item">Τετάρτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181101" id="date20181101">
                                                        <span class="str-day">01/11</span><br />
                                                        <span class="day-item">Πέμπτη</span>
                                                    </a>
                                                </div>
                                                <div class="col-xs-2">
                                                    <a class="datepick" href="#" data-vc-selecteddate="20181102" id="date20181102">
                                                        <span class="str-day">02/11</span><br />
                                                        <span class="day-item">Παρασκευή</span>
                                                    </a>
                                                </div>
                                    </div>
                            </div>
                            <a data-slide="prev" href="#theCarousel" class="left carousel-control"><i class="glyphicon glyphicon-chevron-left"></i></a>
                            <a data-slide="next" href="#theCarousel" class="right carousel-control"><i class="glyphicon glyphicon-chevron-right"></i></a>
                        </div>
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

  3. #3

    Thread Starter
    King of sapila
    Join Date
    Oct 2006
    Location
    Greece
    Posts
    6,597

    Re: need to remove attribute

    I can get remove all the vc-selected with the below
    Code:
    $('.vc-selected').each(function(i){
    $(this).removeClass('vc-selected');
    
    });
    question is how to make it understand that it has to search only on the elements contained inside the choose-day div.


    Edit.
    I think i did it!

    Code:
     $('.vc-selected', '.choose-day').each(function(i){
    $(this).removeClass('vc-selected');
    
    });
    ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ
    πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν·

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width