Getting Text out of a child element trapped in an object

Question

I am a JavaScript Newbie!

It took me the entire day to code a Javascript driven Slider! I didn't want to use the Bootstrap Carousel. The Slider has 4 pictures and each picture has a Text above that picture. The Slider navigates through the Pictures and the belonging Text. All these Pictures are in divs with class="rtype" . In each of these rtype divs there is a span with the description. The Spans have no id.

The Slider is working perfectly! No issues there!

What i am trying to do:

I want Javascript (jQuery) to read the text out of that description ( span ) and display it in a td . The td has an id="rt"

So whenever i click on next or previous, 3 things should happen:

1. Change Picture (working)
2. Change Description (working)
3. Extract Description text from the slider and display it in a td that has absolutely nothing to do with the slider (not working)

All of this and more is in a single html file. As of now the entire website consists of one html file only.

The HTML Slider Code:

<div id="minc" class="col-xs-6 col-sm-3">

<div class="rtype text-center" style="display: block;">
<a href=""><img class="lb img-responsive pull-left" src="img/l.png" alt=""/></a><span><strong>SINGLE ROOM</strong></span>
<a href=""><img class="rb img-responsive pull-right" src="img/r.png" alt=""/></a>
<img class="img-responsive" src="img/SR.jpg" alt=""/>
</div>

<div class="rtype text-center" style="display: none;">
<a href=""><img class="lb img-responsive pull-left" src="img/l.png" alt=""/></a><span><strong>DOUBLE ROOM</strong></span>
<a href=""><img class="rb img-responsive pull-right" src="img/r.png" alt=""/></a>
<img class="img-responsive" src="img/DR.jpg" alt=""/>
</div>  

<div class="rtype text-center" style="display: none;">
<a href=""><img class="lb img-responsive pull-left" src="img/l.png" alt=""/></a><span><strong>TWIN ROOM</strong></span>
<a href=""><img class="rb img-responsive pull-right" src="img/r.png" alt=""/></a>
<img class="img-responsive" src="img/TR.jpg" alt=""/>
</div>  

<div class="rtype text-center" style="display: none;">
<a href=""><img class="lb img-responsive pull-left" src="img/l.png" alt=""/></a><span><strong>FAMILY ROOM</strong></span>
<a href=""><img class="rb img-responsive pull-right" src="img/r.png" alt=""/></a>
<img class="img-responsive" src="img/FR.jpg" alt=""/>
</div>      

</div>

The Javascript Navigation Code:

<script>

$(function(){
$(".lb").click(function () {
var no_slides = $('.rtype').length;
var parent = $(this).parent().parent();
var current = $('.rtype').index(parent);
var prev = no_slides - 1;
if (current > 0) {
prev = current - 1;
}
$('.rtype').hide();
$('.rtype:eq(' + prev + ')').show();
return false;
});
})



$(function(){
$(".rb").click(function () {
var no_slides = $('.rtype').length;
var parent = $(this).parent().parent();
var current = $('.rtype').index(parent);
var next = 0;
if (current < no_slides - 1) {
next = current + 1;
}

$('.rtype').hide();
$('.rtype:eq(' + next + ')').show();
return false;
});
})  
</script>

I had no success with Tree Traversal in the above mentioned Javascript Code the following way:

<script>
$(function(){
$(".rb").click(function () {
var no_slides = $('.rtype').length;
var parent = $(this).parent().parent();
var current = $('.rtype').index(parent);

--> var text = $(this).children('.span').text(); <--
--> $( "#rt" ).text(text); <--

var next = 0;
if (current < no_slides - 1) {
next = current + 1;
}

$('.rtype').hide();
$('.rtype:eq(' + next + ')').show();
return false;
});
})  

Can you guys please help me?

Thanks.

Answer 1

You can find the description of the slide by changing your code slightly when you show the next slide:

var text = $('.rtype:eq(' + next + ')').show().find("span").text();
$("#rt").text(text); 

That should work. Your span s are not children of the elements with class rb , so what you have won't work. Also, you don't want the . in there because you are searching for an span element, not a class.

Since you have already found the next slide, you can chain your jQuery to find the span descendant, then set the text.

Answer 2

For the sake of Completeness:

This is how the Slider Navigation Code must look like:

<script>
$(function(){
$(".lb").click(function () {
var no_slides = $('.rtype').length;
var parent = $(this).parent().parent();
var current = $('.rtype').index(parent);
var prev = no_slides - 1;
if (current > 0) {
prev = current - 1;
}
$('.rtype').hide();
var text = $('.rtype:eq(' + prev + ')').show().find("span").text();
$( "#rt" ).text(text);
return false;
});
})



$(function(){
$(".rb").click(function () {
var no_slides = $('.rtype').length;
var parent = $(this).parent().parent();
var current = $('.rtype').index(parent);
var next = 0;
if (current < no_slides - 1) {
next = current + 1;
}
$('.rtype').hide();
var text = $('.rtype:eq(' + next + ')').show().find("span").text();
$( "#rt" ).text(text);
return false;
});
})  
</script>

Thank You Dave! It is working now!