CODEWITHSUNDEEP
jqueryhtml
user875139
user875139

Reputation: 1621

Displaying Text values from sister divs with Jquery?

I am trying to get the value of the next texts in the 'title_head' divs below after I click on the 'right_arrow' class.

<div class="header">
    <div class="col-md-8 title">
       <div class="title_head">SHIRT</div>
       <div class="title_head" style="display:none">COLLAR</div>
       <div class="title_head" style="display:none">BUTTON</div>
       <div class="title_head" style="display:none">SLEEVE</div>
    </div>
    <div class="col-md-4 right_arrow"><img src="img/arrows-right.png" alt=""></div>
</div>

My jQuery code is below. 

var current = $('.title_head:visible').text();
var first = $('.title_head').first().text();
var last = $('.title_head').last().text();

$('.right_arrow').click(function(){
    if(current == last){
        $('.right_arrow').css('opacity','0.3');
        $('.right_arrow').css('cursor','default');
    }else{
        $(current).css('display','none');
        var val = $('.title_head').nextAll('.title_head:first').text();
        var next_val = $('.title_head').text(val);
        alert(next_val);
    }
});

The problem I am having is that when I alert the value for the 'next_val' it returns an object Object array. I think it is getting all the values of the other divs as a whole e.g "COLLARBUTTONSLEEVE" and not the individual values such as "COLLAR", "BUTTON", "SLEEVE".

I also need to display the next elements text as visible and hide the previously visible text sort of like an image slider but with text.

I hope this is clear. Thanks for your help in advance.

Upvotes: 0

Views: 68

Answers (1)

Rayan Bouajram
Rayan Bouajram

Reputation: 743

You could rewrite your javascript to something more like this:

var items = $('.title_head'),
    index = 1; //start at position

$('.right_arrow').click(function(){

    if(items.length > index) {
        $('.title_head').hide();

        var $nextEl = $($('.title_head')[index++]),
            val = $nextEl.html();

        $nextEl.show();
        alert(val);
    }
    if(items.length === index) {
        $('.right_arrow').css('opacity','0.3');
        $('.right_arrow').css('cursor','default');
    }
});

See the fiddle: http://jsfiddle.net/rK4KR/1/

When you're querying for .title_head it will return back an array of nodes. We can simply go through each position of that array and parse the value. That way we don't have to always check to see which node is visible.

Upvotes: 1

Related Questions