Develop Reference

how to filter elements by name

I have 3 movies, (Annihilation, Bomb x City and The Commuter), i don't know hot to put javascript code so when i start to search like for "ann" that only annihilation movie box appear and other not displayed...like filtering...please help i am not so good at this stuff and i want to learn.Thanks in advance.
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>

Probably the best way to do this is to use js libraries as angular or react.
but here is an simple example for vanila js using oninput event:
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search..." oninput="filterMovies(this.value)">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="movies_boxes_container" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>
<script>
function filterMovies(val){
val = val.toUpperCase();
let moviesBoxes = document.getElementsByClassName('moviebox');
Array.prototype.forEach.call(moviesBoxes, child => {
let id = child.id.toUpperCase()
if(!id.includes(val))
child.style.display = "none";
else{
child.style.display = "block";
}
});
}
</script>

This alternative uses the functions querySelector and querySelectorAll
to find the elements and make the necessary comparison.
This approach uses the function indexOf to find the matches.
This approach uses a class called hide to hide the elements who don't match the entered value.
This approach is case-sensitive.
Use the event input to capture any changes from your input text field.
document.getElementById('filterInput').addEventListener('input', function() {
var value = this.value;
var container = document.getElementById('boxes');
Array.prototype.forEach.call(container.querySelectorAll('.moviebox'), function(e) {
e.classList.add('hide');
Array.prototype.forEach.call(e.querySelectorAll('.namemovie'), function(m) {
if (value.trim() === '' || m.textContent.indexOf(value) !== -1) e.classList.remove('hide');
});
})
})
.hide {
display: none
}
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="namemovie">Annihilation</h3>
<p class="genremovie">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>

You have to implement a Filter/Search List.
There are countless ways to solve this problem but I will put here a complete example coming from w3schools.com
Here's the relevant example, all the code (css / javascript) is embedded in a single html page for the sake of simplicity.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>
This implementation is using a for cycle to loop all the items in the list in search of the position of the characters we are searching: .indexOf(filter) and showing / hiding the current item accordingly.
A few basic concepts that combined together can achieve such a user friendly and powerful use.
As first thing I'd suggest you to separate those functional units in different files writing the parts completely and answering to any question or doubt or unclear information you read.
Write the code in the new files by hand, letter by letter.
Read it, no copy and paste.
I've preferred to put a suggestion instead of a solution because your main request seems to be that you want to learn.
Once you can disassemble / reassemble this code it will also be easy to implement it in your current page.
Take time, answer your own questions, start a course, get books, never give up.
Have fun!

Some html:
<input id='search' type='text'>
<div id='hold_movies'>
<a class='movie'>Annihilation</a><br>
<a class='movie'>Bomb x City</a><br>
<a class='movie'>The Commuter</a>
</div>
Some jQuery:
$("#search").keyup(function() {
val = $.trim(this.value);
if (val === "") {
$('.movie').show();
} else {
$('.movie').hide();
$(".movie:contains(" + val + ")").show();
}
});
Result:
To ensure the search is case-insensitive you can extend jQuery as follows:
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});

Here is what I came up with. this is a good little project to learn some JS! you should try doing something next where you automate the creation of the html given an array of movies. It might be a bit heavy for what you're doing, but React is a neat JS library that's worth looking into and learning about.also be careful about classnames with a . in them. You usually dont want to do that. (looking at your container class)
// grab all the movies
let movies = document.getElementsByClassName('moviebox');
//this returns an object we want an array
//with all the names in it. so lets call OBject.keys() which will
//return an array with all the keys of this object
movies = Object.keys(movies)
.map(key => movies[key].id);
// what we did was loop through the keys, (0,1,2) and index into the object with them (movies[key]). then since hte id is the name of the movie it seems, we just grab the id (movies[key].id) we then save this update array into the already defined movies array.
console.log(movies);
//^ check it out, there are the list of movies, dynamically grabbed!
//lets define a function that will hide a movie given its name.
//this is a super basic function but it does one thing well.
function hideMovie(name) {
document.getElementById(name).style.display = 'none';
console.log("hide "+name)
}
//if we can hide a movie we want to be abble to show one too.
function showMovie(name) {
document.getElementById(name).style.display = 'block';
}
//now lets target the input box
const searchBox = document.getElementById('filterInput');
//we want to add an event listener so everytime the user inputs something
//we look through the movies and hide the ones that dont contain the string
//entered, we also want to make sure we show the right movies too
searchBox.addEventListener('input', () => {
const value = searchBox.value;
const visibleMovies = [];
console.log(value)
//lets filter the movies to only include the ones we want to hide
const hiddenMovies = movies.filter(movie => {
const hidden = movie.indexOf(value) < 0;
//if we're not going to hide it lets show it.
if(!hidden){
visibleMovies.push(movie)
}
return hidden;
});
console.log(hiddenMovies)
//loop through and hide the movies.
for(let i = 0; i< hiddenMovies.length; i++){
hideMovie(hiddenMovies[i]);
}
//loop through and show the movies
for(let i = 0; i< visibleMovies.length; i++){
showMovie(visibleMovies[i]);
}
})
<header>
<div class="container">
<div id="branding">
<h1><span id="logo">mov</span>BLANK</h1>
</div>
<nav>
<ul>
<input type="text" id="filterInput" placeholder="Search...">
<li class="current">Home</li>
<li><a id="newprojection" href="./html/newprojection.html">New projection</a></li>
<li><a id="buyticket" href="./html/buyticket.html">Buy a Ticket</a></li>
<li><a id="newuser" href="./html/newuser.html">New user</a></li>
<li><a id="loginbtn" href="./html/login.html">Log in</a></li>
<li>
<a id="buy" href="#"></a>
</li>
</ul>
</nav>
</div>
</header>
<section id="boxes">
<div id="div1" class=".container">
<div id="annihilation" class="moviebox">
<a class="moviea" href="./html/annihilation.html"><img src="./img/movie1.jpg"></a>
<a id="delete" href="#">X</a>
<h3 class="moviea">Annihilation</h3>
<p class="moviea">Genre: Adventure, Fantasy</p>
</div>
<div id="bombcity" class="moviebox">
<a class="imgmovie" href="./html/bombcity.html"><img src="./img/movie2.jpg"></a>
<a id="change" href="#">X</a>
<h3 class="namemovie">Bomb City</h3>
<p class="genremovie">Genre: Action, Crime</p>
</div>
<div id="commuter" class="moviebox">
<a class="imgmovie" href="./html/commuter.html"><img src="./img/movie3.jpg"></a>
<a id="buy2" href="#">X</a>
<h3 class="namemovie">The Commuter</h3>
<p class="genremovie">Genre: Action, Drama</p>
</div>
<div id="bookmarksResults"></div>
</div>
</section>

I would add the attribute onkeyup to your input element and set it equal to a function that looks at the input text, and then loops through your moviebox div elements and hides them if the h3 element text does not contain the input value.
Example:
<input type="text" id="filterInput" placeholder="Search..." onkeyup="filterTable(this)" />
function filterTable(input) {
var search = input.value;
var movieDivs = document.querySelectorAll('div.moviebox');
for (var i = 0; i < movieDivs.length; i++;) {
var h3 = movieDivs[i].querySelector('h3');
if (h3.innerText.indexOf(search) >= 0)
movieDivs[i].style.display = '';
else
movieDivs[i].style.display = 'none';
}
}

Swapping "Custom Element" without calling connectedCallback

I am creating an election application that will require switching elements in a list. I have the following Custom Element Web Components. I have trimmed the irrelevant functions from the class for brevity.
// Position
// ---------------------------------------
class Position extends HTMLElement {
constructor(title) {
super();
this.title = title
}
connectedCallback() {
this.className = "portlet";
// Copy the HTML template
var template = document.querySelector("#template-e-position");
this.appendChild(document.importNode(template.content, true));
// Create the title tag
var title = this.querySelector(".title");
title.innerHTML = this.title;
// Create event listener for swap links
this.querySelector(".moveUp").addEventListener("click", function(e) {
swapWithPrevSibling(that);
});
this.querySelector(".moveDown").addEventListener("click", function(e) {
swapWithNextSibling(that);
});
}
}
customElements.define('e-position', Position);
// Candidate
// ---------------------------------------
class Candidate extends HTMLElement {
constructor(name) {
super();
this.name = name;
}
connectedCallback() {
// Copy the HTML template
var template = document.querySelector("#template-e-candidate");
this.appendChild(document.importNode(template.content, true));
// Create the title tag
var name = this.querySelector(".name");
name.innerHTML = this.name;
// Create event listener for delete link
var a = this.querySelector("a.delete");
var that = this;
a.addEventListener('click', function(e) { return that.delete(e) }, false);
}
delete(event) {
deleteNode(this);
}
}
customElements.define('e-candidate', Candidate);
I have the swap functions:
function swapWithPrevSibling (elm) {
elm.parentNode.insertBefore(elm,elm.previousSibling)
}
function swapWithNextSibling (elm) {
elm.parentNode.insertBefore(elm.nextSibling,elm)
}
I use the following template to build the Custom Elements:
<template id="template-e-position">
<div class="header">
<span class="title"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
</div>
<form class="add-candidate">
<input type="text" />
<input type="submit" value="Add candidate">
</form>
</template>
<template id="template-e-candidate">
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</template>
Since I create the Custom Elements from the HTML templates, I need to clone the templates in the connectedCallback() (since adding children in the constructor is disallowed in v1). The result of this is when I call the swap function to the "positions" in the list, it ends up re-cloning the template and adding in unnecessary DOM elements to both Position and Candidate elements.
For example, the result after swapping should be:
<e-position title="Vice-President" class="portlet">
<div class="header">
<span class="title">Vice-President</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
<e-candidate>
<span class="name">Evan</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
<e-candidate>
<span class="name">Steph</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
</e-position>
But it ends up being a jumbled:
<e-position title="Vice-President" class="portlet">
<div class="header">
<span class="title">Vice-President</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
<e-candidate>
<span class="name">Evan</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate><e-candidate>
<span class="name">Steph</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
<div class="header">
<span class="title"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
</e-position>
Is there a better way to clone the HTML templates so that I don't need to add elements in the connectedCallback? If not, how can I efficiently swap without bringing along all the extra elements? Note that I do not want to use jQuery as I want a lightweight application.
I have seen this and it doesn't work because it ends up calling the connectedCallback and inserting How to swap DOM child nodes in JavaScript?

There are several solutions:
You can use a flag to see if it's the first time the callback is called, and insert the template only if the flag is not set yet.
customElements.define('e-candidate', class extends HTMLElement {
connectedCallback() {
if (!this.init) {
var template = document.querySelector('#template-e-candidate')
this.appendChild(template.content.cloneNode(true))
this.querySelector('.moveUp')
.onclick = () =>
this.previousElementSibling && this.parentElement.insertBefore(this, this.previousElementSibling)
this.init = true
}
}
})
e-candidate { display:block }
<template id="template-e-candidate">
<slot></slot>
<button class="moveUp">↑</button>
</template>
<e-candidate>First</e-candidate>
<e-candidate>Second</e-candidate>
You can use CSS flexbox with CSS order property to change the order of the elements without using insertBefore().

call Load more function for active tab

I'm trying to develop a load more function for a specific tab pane, in this case, the active tab pane. I'm having issues with this jquery function because I'm calling the load more in the end of all tabs, and in my JS function I can't figure out how to load after the pane that is active, in which the button was clicked. This way I keep loading the questions in the last pane, but I couldnt print without var lastItem = $('div.question-col .question-summary:last');
$(document).ready(function () {
$(".load-more").on('click', function (e) {
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));
});
$(this).data('next-page', parseInt(next_page) + 1);
});
siteStats();
});
function addNewQuestions(objects) {
$.each(objects, function (i, object) {
console.log(object);
var lastItem = $('div.question-col .question-summary:last');
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);
});
}
The update functions are not relevant to this case, I guess.
<div id="tabs" class="tab-content">
<ul>
<li>Recent Questions</li>
<li>Unanswered Questions</li>
<li>Top Scored Questions</li>
</ul>
{if empty($recent_questions)}
<div class = "col-sm-12" style = "text-align: center"><strong>No questions to load!</strong></div>
{/if}
{if !empty($recent_questions)}
<div id="recent_questions" class="question-col">
<!-- Questions come here -->
<div class = "load-more"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "recent_questions">
<a id="loadMore">
Load More...
</a>
</div>
</div>
{/if}
<div id="unanswered_questions">
<!-- Questions come here -->
<div class = "load-more"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "unanswered_questions">
<a id="loadMore">
Load More...
</a>
</div>
</div>
<div id="top">
<!-- Questions come here -->
<div class = "load-more"
data-next-page = "1"
data-url = "{url('controller/api/questions/load_more_questions')}"
data-tab = "top_scored_questions">
<a id="loadMore">
Load More...
</a>
</div>
</div>
//Questions come here - Question template
<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>
My question is: is there any way to put my loaded content after the last item of the active pane?
Kind regards

Advanced filling of prev and next buttons with jQuery

In a hidden list I have a variable list with this data (in this example www.domain.com/2009 is the current URL):
<ul id="WalkingYears" style="visibility: hidden; display:none;">
<li id="Walk2011"><img src="some-imga.jpg"></li>
<li id="Walk2010"><img src="some-imgs.jpg"></li>
<li id="Walk2008"><img src="some-imgf.jpg"></li>
<li id="Walk2007"><img src="some-imgg.jpg"></li>
<li id="Walk2006"><img src="some-imgh.jpg"></li>
<li id="Walk2005"><img src="some-imgj.jpg"></li>
<li id="Walk2004"><img src="some-imgk.jpg"></li>
<li id="Walk2003"><img src="some-imgl.jpg"></li>
<li id="Walk2002"><img src="some-imgz.jpg"></li>
<li id="Walk2001"><img src="some-imgx.jpg"></li>
</ul>
The above list is auto-generated and I can change this if I like; for example into:
<div id="Walk2011" data-target="http://domain.com/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/2001" data-img="some-imgz.jpg" data-title="2001"></div>
You see that the current URL (www.domain.com/2009) is not showing in this list.
Now I'd like to fill the prev and next navigation, based on the current url, using the values mentioned above (title, href, image src):
<a href="http://domain.com/2008" title="2008" id="balk-prev-btn" class="prev-btn left">
<img src="some-imgd.jpg" alt="2008">
<span class="icon"></span>
</a>
<a href="http://domain.com/2010" title="2010" id="balk-next-btn" class="next-btn right">
<img src="some-imgs.jpg" alt="2010">
<span class="icon"></span>
</a>
I guess I need to
first find out what the current URL is
then compare it to the data in the list
somehow point out the prev and next page
Also when having selected a certain variable (the name of a walker) the links in the list will be different and the URL will be www.domain.com/walkername/2009:
<div id="Walk2011" data-target="http://domain.com/walkername/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/walkername/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/didnotwalk/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/didnotwalk/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/walkername/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/didnotwalk/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/didnotwalk/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/walkername/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/didnotwalk/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/didnotwalk/2001" data-img="some-imgz.jpg" data-title="2001"></div>
In this case the prev and next button should only show the links with the walker name in it :) and should look like this:
<a href="http://domain.com/walkername/2006" title="2006" id="balk-prev-btn" class="prev-btn left">
<img src="some-imgg.jpg" alt="2006">
<span class="icon"></span>
</a>
<a href="http://domain.com/walkername/2010" title="2010" id="balk-next-btn" class="next-btn right">
<img src="some-imgs.jpg" alt="2010">
<span class="icon"></span>
</a>
Can someone help me?
tnx!

Okay so if you have this layout, this script should do the job
<div id="Walk2011" data-target="http://domain.com/walkername/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/walkername/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/didnotwalk/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/didnotwalk/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/walkername/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/didnotwalk/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/didnotwalk/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/walkername/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/didnotwalk/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/didnotwalk/2001" data-img="some-imgz.jpg" data-title="2001"></div>
jQuery based script:
var xlocation = "http://www.domain.com/walkername/2009".match(/(\/[a-zA-Z]+\/)(\d+)/); //sorry for ugly regexp --> ["/walkername/2009", "/walkername/", "2009"], also here should be used window.location.href , but for example lets use static string;
//find and filter only links which have 'walkername' in data-tagert
$el = $('#WalkingYears div[id^=Walk]').filter(function(i,el){
return $(el).attr('data-target').indexOf(xlocation[1]) > 0;
}),
//sort if divs is scrambeled
$elSorted = $el.sort(sorter);
prev = jQuery.grep($elSorted,function(el,i){
return $(el).attr('data-title').replace(/^\D+/g, '')*1<xlocation[2]*1
})
next = jQuery.grep($elSorted,function(el,i){
return $(el).attr('data-title').replace(/^\D+/g, '')*1>xlocation[2]*1
})
var sorter = function(a,b){
var a = $(a).attr('data-title').replace(/^\D+/g, '')*1,
b = $(b).attr('data-title').replace(/^\D+/g, '')*1
return b-a
}
//ADD href to buttons...
$('#balk-prev-btn').prop('href',$(prev).first().attr('data-target'))
$('#balk-next-btn').prop('href',$(next).last().attr('data-target'))
You`ll need to check if prevEl and NextEl still exists in case if current page is first or last. Also you will need to review regexp used for parsing url :)

How to select child div within parent div

I want to select html of class "postHandel" when I click replyBtn.
There are multiple "repost" divs, I want postHandel of the current div in which I am clicking replyBtn.
<div class="repost" data-id="52">
<div class="profileImg"></div>
<div class="postWrap">
<div class="postUser">Tejas Kulkarni</div>
<div class="postHandel">#tejas</div>
<div class="postText"> </div>
</div>
<i class="icon-chevron-down"></i>
<div class="clearfix"></div>
<div class="postOptions twtOptRP52">
<ul>
<li> <a class="btn btn-mini rtBtn" data-id="96"><i class="icon-retweet"></i> Repost</a></li>
<li> <a class="btn btn-mini replyBtn" data-id="96"><i class="icon-reply"></i> Reply</a></li>
<li> <a class="btn btn-mini favBtn" data-id="96"><i class="icon-star"></i> Fav</a></li>
<li><div class="loadingPostsBtn hideme loadingBtn-96 hideme"><img src="http://linkzone.dev/assets/img/ajax-loader.gif"></div></li>
<li><div class="loadingFailBtn hideme loadingFail-96 hideme"><img src="http://linkzone.dev/assets/img/ajax-fail.gif"></div></li>
</ul>
</div>
My jQuery Code is :
$(document).on("click",".replyBtn",function(){
var postHandel = $(this).closest(".postWrap").html('');
var log = $(postHandel).closest(".postHandel").html();
console.log(log);
});

Try this:
var log = $(this).closest(".repost").find(".postHandel:first").html();

$(this) // current element (.replybtn)
.closest('.report') // up to main wrapper (top-most grouping element)
.find('.postWrap > .postHandel') // down to postHandel
.html(); // the end value
You may not even need the .postWrap > discriminator, but it does make sure that it's the that .postHandel you're after.