Cargar más / Mostrar menos problemas con jquery

Pregunta (s): A continuación, encuentro algunos problemas, que son:

1.) donde $('.resume_container_item:lt(' + x + ')').show(); está ubicado, solo muestra los primeros 4 elementos en el primer contenedor; debe mostrar los primeros 4 elementos en todos los contenedores.

2.) la statement if aquí

 if (x == size_item) { // ISSUE LIES HERE - For some reason, it does not want to fade out once reached... $('.resume_view_more').fadeOut(250); } 

=============================================== =======================

En cuanto a la CSS, tengo las .resume_container_item y .resume_show_less como display: none;

Aquí está el código completo:

 size_item = $('.resume_container_item').size(); x = 4; $('.resume_container').each(function( index ) { $(this).children('.resume_container_item:lt(' + x + ')').show(); }); // Fixed with help from n01ze $('.resume_view_more').click(function() { var $parent = $(this).parent(); x = (x + 4 <= size_item) ? x + 4 : size_item; $parent.find('.resume_container_item:lt(' + x + ')').slideDown(); $parent.find('.resume_show_less').fadeIn(500); if (x == size_item) { // ISSUE LIES HERE - For some reason, it does not want to fade out once reached... $('.resume_view_more').fadeOut(250); } return false; }); $('.resume_show_less').click(function() { var $parent = $(this).parent(); x = (x - 4 < 4) ? 4 : x - 4; $parent.find('.resume_container_item').not(':lt(' + x + ')').slideUp(); $parent.find('.resume_view_more').fadeIn(500); if (x == 4) { $('.resume_show_less').fadeOut(250); } return false; }); 

Cualquier sugerencia y / o idea sobre cómo corregir esto es muy apreciada … He estado en esto durante horas y no puedo entender por qué ocurre esto …

ACTUALIZAR:

Aquí hay un jsFiddle

ACTUALIZACIÓN 2:

jsFiddle

Con esta actualización, el problema # 1 ha sido corregido con la ayuda de n01ze

El error en el segundo violín ocurre porque confías en una sola variable x para manejar dos contadores diferentes.

Puede verificar cuántos elementos muestra contando :visible elementos :visible dentro del contenedor

 $('.resume_view_more').click(function() { var $parent = $(this).parent(); var size_item = $parent.children('.resume_container_item').size(); var tmp_x = $parent.children('.resume_container_item:visible').size(); tmp_x = (tmp_x + 4 < = size_item) ? tmp_x + 4 : size_item; $parent.find('.resume_container_item:lt(' + tmp_x + ')').slideDown(); $parent.find('.resume_show_less').fadeIn(500); if (tmp_x == size_item) { $parent.children('.resume_view_more').fadeOut(250); } return false; }); 

Violín aquí

Intenta esto, para cargar 4 elementos en cada contenedor,

 //$('.resume_container_item:lt(' + x + ')').show(); //Comment this line $('.resume_container').each(function( index ) { $( this ).children('.resume_container_item:lt(' + x + ')').show(); }); 

Editar 2: para el punto 2

utilizar dentro de su bucle

 $('.resume_view_more').click(function() { var $parent = $(this).parent(); size_item = $parent.children('.resume_container_item').size(); //This will fix it ..... rest codes $parent.children('.resume_view_more').fadeOut(250); //Try this to hide specific link 

CÓDIGO FINAL

 $(document).ready(function () { /*! * Author: Michael R. Draemel * http://draemel.com/ */ size_item = $('.resume_container_item').size(); x = 4; //$('.resume_container_item:lt(' + x + ')').show(); // ISSUE LIES HERE - Need to figure out how to show first 4 items in each container $('.resume_container').each(function( index ) { $( this ).children('.resume_container_item:lt(' + x + ')').show(); var chld_size = $(this).children('.resume_container_item').size(); if(chld_size < = x) { $(this).children('.resume_view_more').hide(); $(this).children('.resume_show_less').hide(); } }); $('.resume_view_more').click(function() { var $parent = $(this).parent(); size_item = $parent.children('.resume_container_item').size(); //This will fix it x = (x + 4 <= size_item) ? x + 4 : size_item; $parent.find('.resume_container_item:lt(' + x + ')').slideDown(); $parent.find('.resume_show_less').fadeIn(500); if (x == size_item) { // ISSUE LIES HERE - For some reason, it does not want to fade out once reached... $parent.children('.resume_view_more').fadeOut(250); } return false; }); $('.resume_show_less').click(function() { var $parent = $(this).parent(); size_item = $parent.children('.resume_container_item').size(); //This will fix it x = (x - 4 < 4) ? 4 : x - 4; $parent.find('.resume_container_item').not(':lt(' + x + ')').slideUp(); $parent.find('.resume_view_more').fadeIn(500); if (x == 4) { // $('.resume_show_less').fadeOut(250); $parent.children('.resume_show_less').fadeOut(250); } return false; }); });