We Keep Coding

Hide children of the siblings of grand parent in jQuery

I need to hide the children of siblings of the grand parent. I am stuck in complex situation where I have three <li> inside the <ul> . Now the structure of the html looks like this
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
inside each li this is the html
<div class="chbs-vehicle chbs-clear-fix">
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
</div>
<div class="chbs-vehicle-content">
<div class="chbs-vehicle-content-header">
<span>Sedan</span>
<a href="#" class="chbs-button chbs-button-style-2">
Select
<span class="chbs-meta-icon-tick"></span>
</a>
</div>
<div class="chbs-vehicle-content-price">€42.00</div>
</div>
</div>
So when I click on the chbs-button-style-2 I want to hide chbs-vehicle-content-price div inside all the other li which are the children of siblings of grandparent of this.
this is I where I am stuck
<script type="text/javascript">
jQuery(document).ready(function($){
$('.chbs-button-style-2').on('click', function() {
alert($(this).closest('li').siblings().children().find('.chbs-vehicle-content-price').html());
//Here I am getting Undefined
});
});
</script>

Use the .hide() method:
jQuery(document).ready(function($) {
$('.chbs-button-style-2').on('click', function() {
$(this).closest('li').siblings().children().find('.chbs-vehicle-content-price').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="chbs-vehicle chbs-clear-fix">
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
</div>
<div class="chbs-vehicle-content">
<div class="chbs-vehicle-content-header">
<span>Sedan</span>
<a href="#" class="chbs-button chbs-button-style-2">
Select
<span class="chbs-meta-icon-tick"></span>
</a>
</div>
<div class="chbs-vehicle-content-price">€42.00</div>
</div>
</div>
</li>
<li>
<div class="chbs-vehicle chbs-clear-fix">
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
</div>
<div class="chbs-vehicle-content">
<div class="chbs-vehicle-content-header">
<span>Sedan</span>
<a href="#" class="chbs-button chbs-button-style-2">
Select
<span class="chbs-meta-icon-tick"></span>
</a>
</div>
<div class="chbs-vehicle-content-price">€42.00</div>
</div>
</div>
</li>
<li>
<div class="chbs-vehicle chbs-clear-fix">
<div class="chbs-vehicle-image chbs-vehicle-image-has-gallery" style="opacity: 1;">
</div>
<div class="chbs-vehicle-content">
<div class="chbs-vehicle-content-header">
<span>Sedan</span>
<a href="#" class="chbs-button chbs-button-style-2">
Select
<span class="chbs-meta-icon-tick"></span>
</a>
</div>
<div class="chbs-vehicle-content-price">€42.00</div>
</div>
</div>
</li>
</ul>

How to write a "this" - Function

I would like to reduce my Javascript code, maybe with variables or with "this"? It's to much code for a little bit of intention.
$("#Linkitem1").click(function() {
$("#item1").fadeIn(2500);
$("#item2").hide();
$("#item3").hide();
$("#Linkitem3").removeClass("active btn-warning");
$("#Linkitem2").removeClass("active btn-warning");
$("#Linkitem1").addClass("active btn-warning");
});
$("#Linkitem2").click(function() {
$("#item2").fadeIn(2500);
$("#item1").hide();
$("#item3").hide();
$("#Linkitem1").removeClass("active btn-warning");
$("#Linkitem3").removeClass("active btn-warning");
$("#Linkitem2").addClass("active btn-warning");
});
$("#Linkitem3").click(function() {
$("#item3").fadeIn(2500);
$("#item2").hide();
$("#item1").hide();
$("#Linkitem1").removeClass("active btn-warning");
$("#Linkitem2").removeClass("active btn-warning");
$("#Linkitem3").addClass("active btn-warning");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div id="card-content" class="container">
<div class="card border-warning text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a id="Linkitem1" data-toggle="collapse" href="#item1" role="button" aria-expanded="true" aria-controls="collapseOne" title="" class="nav-link text-white btn-warning active">item1</a>
</li>
<li class="nav-item">
<a id="Linkitem2" data-toggle="collapse" href="#item2" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item2</a>
</li>
<li class="nav-item">
<a id="Linkitem3" data-toggle="collapse" href="#item3" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item3</a>
</li>
</ul>
</div>
<!--Content item1-->
<div id="item1" class="animated fadeIn collapse show card-body" data-parent="#card-content">
<h5 class="card-title">title for item 1</h5>
<p class="card-text">content item 1.</p>
</div>
<!--content item 2-->
<div id="item2" class="animated fadeIn collapse card-body" data-parent="#card-content">
<h5 class="card-title">title item 2</h5>
<p class="card-text">content item 2</p>
<!--content 3-->
<div id="item 3" class="collapse card-body" data-parent="#card-content">
<h5 class="card-title">title item 3</h5>
<p class="card-text">content item 3</p>
</div>
</div>
</main>
This code is working. I am clicking in the navigation of linkitem1 and in the card-body is just content of item 1. if am clicking on linkitem2, I can see the content of item2.

You can use that way if it is possible. add class "Linkitem" with nav-item anchor tag and add class "item" with content item
$(".Linkitem").click(function(){
let dataId = $(".Linkitem").index(this);
$('.item:eq('+dataId+')').fadeIn(500);
$('.item:not(:eq('+dataId+'))').fadeOut(500);
$('.Linkitem:eq('+dataId+')').addClass("active btn-warning");
$('.Linkitem:not(:eq('+dataId+'))').removeClass("active btn-warning");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<main role="main">
<div id="card-content" class="container">
<div class="card border-warning text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a id="Linkitem1" class="Linkitem" data-toggle="collapse" href="#item1" role="button" aria-expanded="true" aria-controls="collapseOne" title="" class="nav-link text-white btn-warning active">item1</a>
</li>
<li class="nav-item">
<a id="Linkitem2" class="Linkitem" data-toggle="collapse" href="#item2" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item2</a>
</li>
<li class="nav-item">
<a id="Linkitem3" class="Linkitem" data-toggle="collapse" href="#item3" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item3</a>
</li>
</ul>
</div>
<!--Content item1-->
<div id="item1" class="item animated fadeIn collapse show card-body" data-parent="#card-content">
<h5 class="card-title">title for item 1</h5>
<p class="card-text">content item 1.</p>
</div>
<!--content item 2-->
<div id="item2" class="item animated fadeIn collapse card-body" data-parent="#card-content">
<h5 class="card-title">title item 2</h5>
<p class="card-text">content item 2</p>
</div>
<!--content 3-->
<div id="item3" class="item collapse card-body" data-parent="#card-content">
<h5 class="card-title">title item 3</h5>
<p class="card-text">content item 3</p>
</div>
</div>
</main>

You can apply for loop, but you need to change attribute id on class. Otherwise, you should use additional attributes like a data-.
$(()=>{
$(".item").each(function(){
$(this).hide();
});
for (let i = 0; i < 3; i++){
$(".Linkitem").eq(i).click(function(){
$(".item").each(function(){
$(this).hide();
});
$(".item").eq(i).fadeIn(2500);
$(".Linkitem").each(function(){
$(this).removeClass("active btn-warning");
});
$(this).addClass("active btn-warning");
});
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class='Linkitem otherclass'>Linkitem11111111</a> <br>
<a class='Linkitem otherclass'>Linkitem22222222</a> <br>
<a class='Linkitem otherclass'>Linkitem33333333</a> <br>
<br><br><br>
<div class='item other'>1 1 1 1 1 1 1</div>
<div class='item other'>2 2 2 2 2 2 2</div>
<div class='item other'>3 3 3 3 3 3 3</div>

Here's a solution that uses event.target instead of this (or $(this)).
JQuery is still used for .fadeIn and .hide, although this could be accomplished without JQuery, too.
A click listener distinguishes between clicks on "link" buttons and all other clicks, and loops through the item divs, hiding them and showing only the "active" one.
// Calls `changeActiveItem` when something is clicked
document.addEventListener("click", changeActiveItem);
// Defines a listener (with automatic access to the triggering event)
function changeActiveItem(event){
const clickedElement = event.target; // `target` property holds the clicked element
// Makes sure the clicked element is a link before proceeding
if(!clickedElement.classList.contains("link")){
return; // Function will stop here if a non-link element was clicked
}
// Gets the item id stored in the link's "data-linked-item-id" attribute
const linkedItemId = clickedElement.dataset["linkedItemId"]; // Magic name conversion
// Deactivates and hides all items
const items = document.getElementsByClassName("item");
for(let item of items){
item.classList.remove("active");
item.classList.remove("btn-warning"); // This class currently has no effect
$(item).hide(); // Hides item
// Activates and animates the selected item
if(item.id === linkedItemId){
$(item).fadeIn(2500);
item.classList.add("active");
item.classList.add("btn-warning");
}
}
}
div{ margin-bottom: 15px; }
.item{ display: none; font-size: 3em; }
.active{ display: block; color: darkred; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="item1Link" class="link" data-linked-item-id="item1">activate item 1</button>
<div>
<div id="item1" class="item active">Item 1</div>
</div>
<button id="item2Link" class="link" data-linked-item-id="item2">activate item 2</button>
<div>
<div id="item2" class="item">Item 2</div>
</div>
<button id="item3Link" class="link" data-linked-item-id="item3">activate item 3</button>
<div>
<div id="item3" class="item">Item 3</div>
</div>

Expanding and collapsing in UL tag

I have the follwing HTML, where there is a collapse (collapsebutton1) and expand button (expandbutton1) which will collapse and expand the div networkDevicesCollapsePanel, this is working as expected.
Now i need to bring the collapse and expand in each < UL >. There are three UL here, but there may be more later. How to achieve this?
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;">
<div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
</li>
</ul>
</div>
</div>
</div>
Button Click code below
$("#expandbutton1").hide();
$("#expandbutton1").click(function () {
$('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
$("#expandbutton1").hide();
$("#collapsebutton1").show();
$('a[data-toggle="collapse"]').each(function (index) {
$(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
});
});
$("#collapsebutton1").click(function () {
$('#networkDevicesLinks div.panel-collapse').removeClass('in');
$("#expandbutton1").show();
$("#collapsebutton1").hide();
$('a[data-toggle="collapse"]').each(function (index) {
$(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
});
});
});

It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.
And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button
<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
<div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
<div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<div ng-show="ciAttributesCount" id="expandbutton1_{{$index}}" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
</div>
<div class="" >
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
<li>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
</li>
</ul>
</div>
</div>
</div>
Revised Code below:
I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong
<div class="">
<ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
<li>
<div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
<a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a>
<span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
<br />
<span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
<br />
<span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
<br />
</li>
</ul>
</div>

How to get the "id" of moving sortable UIKit 3 element using JavaScript?

I want to know or print which card that is being dragged let's say upon drop and show it in the UIKit notification. I checked the console.log but nothing happens. From the documentation, it is only possible to get even on moving but not to get the value of the element that is being dragged. My code is below.
https://codepen.io/rangka_kacang/pen/zWbOWo
HTML:
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<div class="uk-container">
<div uk-grid>
<div class="uk-width-1-6">
<nav uk-navbar>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="">
<img class="uk-margin-small-right" height="48" width="48" src="https://image.flaticon.com/icons/svg/426/426121.svg">
Dashboard
</a>
</div>
</nav>
</div>
<div class="uk-width-expand">
<nav uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item" href="">
<i class="fas fa-bars fa-2x"></i>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a>
<div class="uk-text-center">
<i class="fas fa-user-circle fa-2x"></i> <i class="fas fa-chevron-down"></i>
<div class="uk-navbar-subtitle">Account</div>
</div>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-padding-medium">
<div class="uk-container">
<ul id="sortable" class="uk-grid-small uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li id="name">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Name
</div>
</li>
<li id="email">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Email
</div>
</li>
<li id="address">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Address
</div>
</li>
</ul>
</div
</div
JS:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
Thanks!

If you modify:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
To be:
UIkit.util.on('#sortable', 'moved', function (item) {
console.log(item.detail[1].id)
UIkit.notification(`Card is ${item.detail[1].id}`, 'success');
});
It will display the elements id in the notification. You can go higher up in the "item" object in order to get more information on the dropped element.
Also, I'm using a template literal here to put the id in the notification. That's not supported via IE 11 so you might want to do something more traditional if you care about that.
For reference, you can see the data captured when moving elements via developer console here:
https://getuikit.com/assets/uikit/tests/sortable.html

Select the last element using id and class

I'm trying to develop a load-more function using jquery. With my current approach I only load more content after the last question-summay which appears in the last tab pan of my table. I want, when I click on my load-more button to load my content after the last question-summary of that question-col with the respective id.
My JS function:
$(document).ready(function () {
$(".loadMore").on('click', function () {
var tab = $(this).data('tab');
var next_page = $(this).data('next-page');
console.log(next_page);
console.log(tab);
$.get($(this).data('url') + '?tab=' + tab + '&page=' + next_page, function (data) {
addNewQuestions($.parseJSON(data), tab);
});
$(this).data('next-page', parseInt(next_page) + 1);
});
siteStats();
});
function addNewQuestions(objects, tab) {
$.each(objects, function (i, object) {
console.log(tab);
var lastItem = $(".question-summary:last");
console.dir(lastItem);
var newLine = lastItem.clone(true);
var newObject = newLine.find('.question-info');
updateTitleAndLink(newObject.find('.summary a'), object);
updateCreationDate(newObject.find('.question-updated-at'), object);
updateQuestionAnswers(newObject.find('.question-answers'), object);
updateAnswerCount(newObject.find('.answers-count'), object);
updateViewsCount(newObject.find('.views-count'), object);
updateVotesCount(newObject.find('.votes-count'), object);
updateSolvedStatus(newObject.find('.status'), object)
lastItem.after(newLine);
});
}
I believe the problem is on the line var lastItem = $("question-summary:last");. I tried a lot of different solutions, like .question-col#tab.question-summary to select the correct element with id tab but that did not work.
<div id="tabs" class="tab-content">
<ul>
<li>Recent Questions</li>
<li>Unanswered Questions</li>
<li>Top Scored Questions</li>
</ul>
<div id="recent_questions" class="question-col">
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
<div class = "loadMore"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "recent_questions">
<a style="color: #f9f9f9">
Load More...
</a>
</div>
</div>
<div id="unanswered_questions" class="question-col">
{foreach $unanswered_questions as $question}
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
{/foreach}
<div class = "loadMore"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "unanswered_questions">
<a style="color: #f9f9f9">
Load More...
</a>
</div>
</div>
<div id="top" class="question-col">
{foreach $top_scored_questions as $question}
<div class="question-summary narrow">
<div class="question-info col-md-12">
<div class="votes">
<div class="votes-count">
<span title="{$question['votes_count']} votes">
{if $question['votes_count']}
{$question['votes_count']}
{else}
0
{/if}
</span>
</div>
<div>votes</div>
</div>
<div {if $question['solved_date']}
class="status answered-accepted"
{else}
class="status answer-selected"
{/if}
title="one of the answers was accepted as the correct answer">
<div class="answers-count">
<span title="{$question['answers_count']} answer">{$question['answers_count']}</span></div>
<div>answer</div>
</div>
<div class="views">
<div class="views-count">
<span title="{$question['views_counter']} views">{$question['views_counter']}</span></div>
<div>views</div>
</div>
<div class="summary question-title">
<h3>
<a href="{questionUrl($question['publicationid'])}"
data-base-question-url = "{questionUrl('')}"
style="font-size: 15px; line-height: 1.4; margin-bottom: .5em;">
{$question['title']}
</a>
</h3>
</div>
<div class = "statistics col-sm-12 text-right" style="padding-top: 8px">
<span>
<i class = "glyphicon glyphicon-time"></i>
<span class="question-updated-at">{$question['creation_date']}</span>
</span>
<span>
<i class = "glyphicon glyphicon-comment"></i>
<span class="question-answers">{$question['answers_count']}</span>
</span>
</div>
</div>
</div>
{/foreach}
<div class = "loadMore"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "top_scored_questions">
<a style="color: #f9f9f9">
Load More...
</a>
</div>
</div>
</div>
Any idea what I'm doing wrong?
Kind regards

You forgot the class (dot) selector:
var lastItem = $("question-summary:last");
Try this:
var numQ = $('.question-summary').length;
var lastItem = $('.question-summary').eq(numQ-1);

To select last you can use .last() with class selector like
alert($('.myList').last().html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="myList">One</li>
<li class="myList">Two</li>
<li class="myList">Three</li>
</ul>