Кнопка «Далее» появляется, когда не должно быть

Question

У меня есть функция ниже, которая сравнивает текст в двух селекторах. Если последнее появление обоих этих селекторов одинаково, кнопка «Далее» исчезнет. В настоящее время это не работает. Я не знаю, почему это происходит. Просто fyi, то, что я пытаюсь выбрать, является схемой «itemprop» и несколько нетипично.

Вот скрипка - https://jsfiddle.net/carbot3000/8qjdxsz7/3/

function showHide(){ 
    if ($('#areall span[itemprop="reviewBody"]').last().text().trim() == $('.review span[itemprop="reviewBody"]:visible').last().text().trim()) 
    { 
    $('.next').hide(); 
    } 
    else if ($('#areaall span[itemprop="reviewBody"]').first().text().trim() == $('.review:visible span[itemprop="reviewBody"]').first().text().trim()) 
    { 
    $('.prev').hide(); 
    } 
} 

Answer 1

Пожалуйста, измените showHide функцию, как это.

function showHide(){ 
if ($("#areaall").children().last().index() == $("#areaall .review:visible").last().index()) 
    { 
    $('.next').hide(); 
    } 
    else if ($("#areaall").children().first().index() == $("#areaall .review:visible").first().index()) { 
    $('.prev').hide(); 
    } 
} 

см это Updated Fiddle