how to index each element in jquery

how to index each element in jquery - javascript

I need to index each element like this 1/8, 2/8, 3/8
$(document).ready(function () {
var Thumbnail = $('.thm-img'); // main image wrapper
function ThumbnailCounter() {
var AllNumber = $(Thumbnail).length;
$(Thumbnail).each(function () {
var CurrentActive = $(Thumbnail).index() + 1; //return current number active thumbnail
$(this).children('span').append(CurrentActive + '/' + AllNumber);
});
}
new ThumbnailCounter();
});
.thm-img {
border: 1px solid red;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thumb-wrp scrollbar-inner">
<div class="thm-img">
<img src="../img/img/a.jpg"><span class="numeric active"></span>
</div>
<div class="thm-img">
<img src="../img/img/b.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/c.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/d.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/a.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/c.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/b.jpg"><span class="numeric"></span>
</div>
<div class="thm-img">
<img src="../img/img/d.jpg"><span class="numeric"></span>
</div>
</div>

Just change your script:
function ThumbnailCounter() {
var AllNumber = $(Thumbnail).length;
$('.thm-img').each(function () {
var CurrentActive = $(this).index() + 1; // Use $(this) to reference to current element - it will give you right index
$(this).children('span').append(CurrentActive + '/' + AllNumber);
});
}
new ThumbnailCounter();

You can use,
$(".thumb-wrp .thm-img").each(function() {
var index = $(".thumb-wrp .thm-img").index(this) + 1;
var total = $(".thumb-wrp .thm-img").length;
$(this).find("span").text(index + "/" + total);
})
Fiddle

Try
var CurrentActive = $(this).index() + 1;

Related

How to get this code to move one class at a time

So I have three DIVs with the same carousel effect. I am pretty sure I can use three different JavaScript codes to move one at a time but would like to make it as minimal code as possible. With the current code, when I click on the arrow once, all three of them moves. How can I get them to move separately?
There's three of the same one as the one below:
(function ($) {
$.fn.thumbGallery = function (settings) {
var $this = $(this);
return this.each(function () {
settings = jQuery.extend({
speed: 1000,
leftArrow: $this.find('.arrow-left'),
rightArrow: $this.find('.arrow-right'),
galleryContainer: $this.find('.gallery-inner'),
visibleImagesSize: 4
}, settings);
var imgElements = settings.galleryContainer.find('img').length;
var size = settings.visibleImagesSize;
//settings.leftArrow.hide();
if (imgElements > settings.visibleImagesSize) {
settings.rightArrow.show();
} else {
//settings.rightArrow.hide();
}
function animateLeft() {
var el = settings.galleryContainer.children(":last");
settings.galleryContainer.animate({
left: '+=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function animateRight() {
var el = settings.galleryContainer.children(":first");
settings.galleryContainer.animate({
left: '-=' + el.outerWidth(true) + 'px'
},
settings.speed);
}
function checkArrows() {
if (size === settings.visibleImagesSize) {
//settings.leftArrow.hide();
} else {
settings.leftArrow.show();
}
if (size === imgElements) {
//settings.rightArrow.hide();
} else {
settings.rightArrow.show();
}
}
settings.leftArrow.click(function () {
animateLeft();
size--;
checkArrows();
});
settings.rightArrow.click(function () {
animateRight();
size++;
checkArrows();
});
});
};
})(jQuery);
$(document).ready(function () {
$('.gallery').thumbGallery();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-space">
<h2>Open Space</h2>
<p class="description">Desk space in an open shared office environment that can be used in various of ways.</p>
<center>
<div class="gallery">
<div class="arrow-left">
<div class="arrow-left-small">
</div>
</div>
<div class="gallery-outer">
<div class="gallery-inner">
<div class="gallery-tmb">
<img src="images/openspace1.png" alt="Open Space1" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace2.png" alt="Open Space2" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace3.png" alt="Open Space3" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace4.png" alt="Open Space4" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace5.png" alt="Open Space5" height="auto" width="250"/>
</div>
<div class="gallery-tmb">
<img src="images/openspace6.png" alt="Open Space6" height="auto" width="250"/>
</div>
</div>
</div>
<div class="arrow-right">
<div class="arrow-right-small">
</div>
</div>
</div>
<span class="btn_margin">
<asp:Button ID="Button3" runat="server" Text="More lists" CssClass="btn btn-primary top" OnClick="Btn_More_Click" />
</span>
</center>
</div>

The reason they move together is because you use the .gallery selector when you call thumbsGallery(), which applies to all elelements that have class="gallery" in the HTML code. What you can do is to simply add a unique id to each of the gallery and call thumbsGallery() with each of the selectors.
HTML:
<div class="gallery" id="executive_gallery">
...
</div>
<div class="gallery" id="conference_gallery">
...
</div>
<div class="gallery" id="open_gallery">
...
</div>
Javascript:
$(document).ready(function () {
$('.gallery#executive_gallery').thumbGallery();
$('.gallery#conference_gallery').thumbGallery();
$('.gallery#open_gallery').thumbGallery();
});
JSFiddle: https://jsfiddle.net/3qeLumkp/1/

jQuery attr("src") returning undefined

I'm trying to grab the source of an image using jQuery. However, when I log the result, it returns undefined. Here is my code:
$(document).ready(function() {
$(".btn-expand").on("click", function() {
var img = $(".img-" + "num" + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

$(".img-" + "num" + " img")
is exactly equivalent to
$(".img-num img")
I believe you meant "num" to be a variable called num whose value is the number of the target image, not a hard-coded string:
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

Well you have an attribute on the anchor you do not read. Change it to be a data attribute and use a variable instead of hardcoding a string.
$(document).ready(function() {
$(".btn-expand").on("click", function (e) {
e.preventDefault()
var overlay = $(this).data("overlay")
var img = $(".img-" + overlay + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="http://via.placeholder.com/350x150" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

Everything looks good except that the attribute value wasn't defined. To set an attribute in jQuery, you must set the value. Hence, to correct that snippet.
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src","imageSource.extention");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>

var img = $(".img-" + "num" + " img").attr("src");
in this code you are looking for tag with class "im-num" and child with class "img". if you give class im-num to outer div and class img like below
<div class="col-md-12 img-banner img-2 im-num">
<img src="assets/img/placeholder-banner.png" alt="Banner 2" class='img'/>
</div>

Targeting issue when an item is clicked

I have a problem about targeting. I have 5 items. They have own individual values for max and min temperatures in Celsius and Fahrenheit. I have to make them, when I click individual Celsius icon, should change just their value. But now, when I click any Celsius icon, its making changes about all values and they takes the first item's value. You can see it here:
var api_key = "dd39280551e44f1bb34221739171701&q=";
var loc;
$(document).ready(function() {
// var latitude,longitude;
$.getJSON('http://ipinfo.io', function(d){
loc = d.loc.split(",");
var apiLink = "http://api.apixu.com/v1/forecast.json?key=";
var days5 = "&days=5";
var api = apiLink + api_key + loc[0] +','+ loc[1] + days5;
$.getJSON(api, function(v1) {
var tempSwapForecast = true;
var forecastdayData = v1.forecast.forecastday;
var days = forecastdayData.map(function(d) {
return d.day;
});
var maxtempc = days.map(function(maxc) {
return maxc.maxtemp_c;
});
var mintempc = days.map(function(minc) {
return minc.mintemp_c;
});
var maxtempf = days.map(function(maxf) {
return maxf.maxtemp_f;
});
var mintempf = days.map(function(minf) {
return minf.mintemp_f;
});
$('.forecasticons img').each(function(i) {
$(this).attr('src', days[i].condition.icon);
});
$('.frc-temp').each(function(i) {
$(this).html(Math.round(maxtempc[i]) + "-" + Math.round(mintempc[i]));
$('.frc-degree').click(function() {
for (var j = 0; j < $(this).length; j++) {
if(tempSwapForecast===false){
$('.frc-temp').html(Math.round(maxtempc[j]) + "-" + Math.round(mintempc[j]));
$('.frc-degree').html(" ℃");
tempSwapForecast = true;
} else {
$('.frc-temp').html(Math.round(maxtempf[j]) + "-" + Math.round(mintempf[j]));
$('.frc-degree').html("℉");
tempSwapForecast = false;
}
}
});
});
$('.forecastText').each(function(i) {
$(this).html(days[i].condition.text);
});
});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="other-days">
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons" >
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>

Very small changes to make it work: in your click handler, rather than finding by class the field to fill, I use the clicked element to find its parent and then find the class WITHIN that parent. So it becomes $(this).parent().find(...) All these changes are between lines 53 and 59.
var api_key = "dd39280551e44f1bb34221739171701&q=";
var loc;
$(document).ready(function() {
// var latitude,longitude;
$.getJSON('http://ipinfo.io', function(d) {
loc = d.loc.split(",");
var apiLink = "http://api.apixu.com/v1/forecast.json?key=";
var days5 = "&days=5";
var api = apiLink + api_key + loc[0] + ',' + loc[1] + days5;
$.getJSON(api, function(v1) {
var tempSwapForecast = true;
var forecastdayData = v1.forecast.forecastday;
var days = forecastdayData.map(function(d) {
return d.day;
});
var maxtempc = days.map(function(maxc) {
return maxc.maxtemp_c;
});
var mintempc = days.map(function(minc) {
return minc.mintemp_c;
});
var maxtempf = days.map(function(maxf) {
return maxf.maxtemp_f;
});
var mintempf = days.map(function(minf) {
return minf.mintemp_f;
});
$('.forecasticons img').each(function(i) {
$(this).attr('src', days[i].condition.icon);
});
$('.frc-temp').each(function(i) {
// Added a 'units' property, so the temperature
// can track what type of unit it is displaying.
$(this).data("units", "c");
$(this).html(Math.round(maxtempc[i]) + "-" + Math.round(mintempc[i]));
});
$('.frc-degree').on("click", function() {
// As we use the .frc-temp el often, reference it once.
var myTempEl = $(this).parent().find(".frc-temp");
// This is the unique index of the clicked day.
var myIndex = $(".forecastday").index(
$(this).parents(".forecastday")
);
/****
* Above, we created a data attribute on the
* .frc-temp element to store the units. By
* doing this, the element becomes self-
* contained. Here, we can toggle the units
* based on that data attribute.
****/
if (myTempEl.data("units") === "f") {
// First, switch the unit attribute...
myTempEl.data("units", "c");
// Then, replace the contents of the temp el
myTempEl.html(
Math.round(maxtempc[myIndex]) +
"-" +
Math.round(mintempc[myIndex]));
// Then, set the contents of this to 'c'
$(this).html(" ℃");
tempSwapForecast = true;
} else {
myTempEl.data("units", "f");
myTempEl.html(
Math.round(maxtempf[myIndex]) +
"-" +
Math.round(mintempf[myIndex]));
$(this).html("℉");
tempSwapForecast = false;
}
});
$('.forecastText').each(function(i) {
$(this).html(days[i].condition.text);
});
});
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="other-days">
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
<div class="forecastday">
<div class="forecasticons">
<img class="fcicon" alt="weather-icon" src="">
</div>
<div class="forecastText"></div>
<div class="forecasttemp">
<span class="frc-temp"></span>
<a class="frc-degree" href="#">℃</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>
So many many small changes here: the frc-temp elements now have a data attribute that tracks whether the units are farenheit or centigrade, and the way I reference the elements has also changed slightly.

Change background of dynamic added elements

I want to change the background of the last added element in the dom. To give you a better look here is the html:
<div class="check-in-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="ticket-img">
<img class="image" src="img/icons/ticket.png">
</span>
</div>
<div class="ui-block-b">
<h4>Inchecken</h4>
<div class="check-in-notification-append"></div>
</div>
</div>
</div>
<div class="douane-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="douane-img">
<img class="douane-img image" src="img/icons/douane.png">
</span>
</div>
<div class="ui-block-b">
<h4>Douane</h4>
<div class="douane-notification-append"></div>
</div>
</div>
</div>
<div class="gate-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="gate-img">
<img class="gate-img image" src="img/icons/gate.png">
</span>
</div>
<div class="ui-block-b">
<h4>Gate</h4>
<div class="gate-notification-append"></div>
</div>
</div>
Where I append the elements to check-in-notification-append, douane-in-notification-append, gate-in-notification-append here a better look at the js file.
$(document).on("pagebeforeshow","#progress",function(){
var incheckHtml = '';
var douaneHtml = '';
var gateHtml = '';
for(var count = 0; count < info.data.length; count++){
var shortmessage = info.data[count][3];
var category = info.data[count][4];
var typeOf = info.data[count][5];
if(typeOf === "warning"){
imgPath = 'img/icons/alarm.png';
} else {
imgPath = 'img/icons/alert.png';
}
if (!Array.prototype.last){
Array.prototype.last = function(){
return this[this.length - 1];
};
};
if (category === 'inchecken'){
incheckHtml = incheckHtml + "<div class='notification-item'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
// $('.check-in-wrapper').empty().prepend(incheckHtml);
$('.check-in-notification-append').empty().prepend(incheckHtml);
}
if(category === 'douane'){
douaneHtml = douaneHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
$('.douane-notification-append').empty().prepend(douaneHtml);
}
if(category === 'gate'){
gateHtml = gateHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
$('.gate-notification-append').empty().prepend(gateHtml);
}
}
});
But how do I acces the last added element in any category which removes the class "overlay". I'll hope someone could help me out accessing the last added element and removeClass overlay. I have written an .last() function but this will only give me the output of the last object in array...

I think you could achieve this by having some common selector which applies to all the elements that could be affected and using Jquery's last() function.
$(".allMyThings").last().removeClass("overlay");
https://api.jquery.com/last/

Javascript filtering content on checkbox value

I have code like this
<div id="filter">
</div>
<div id="items">
<div class="item">
<h2>Orange</h2>
<img src="orange.png" alt="" />
</div>
<div class="item">
<h2>Banana</h2>
<img src="banana.png" alt="" />
</div>
</div>
I would like to filter divs with class "item" on its childs img src values. For example, If I checked input witch value banana.png only .item with same img src value should be displayed. Rest must be hidden.
And if you uncheck checkbox, control should be make again - items that were hided by checking that checkobox should be displayed again.
I have got same code that creates proper checkboxes, but how to make rest?
$("#items > div").find("img").each(function() {
var value = $(this).attr("src");
$("#filter").append('<label><input type="checkbox" [value="' + value + '"]>' + value + '</label>');
var toFilter = $("#items > div").find("img");
});
You can see my codepen as well http://codepen.io/anon/pen/gMpGaE?editors=0010

You can filter the div's like this using the change event of checkboxes.
$("#items > div").find("img").each(function() {
var value = $(this).attr("src");
$("#filter").append('<label><input type="checkbox" value="' + value + '">' + value + '</label>');
var toFilter = $("#items > div").find("img");
});
$('#filter').on('change', ':checkbox', function() {
var checkedArray = $('#filter :checkbox:checked').map(function() {
return this.value;
}).get();
if (checkedArray.length) {
$("#items .item").hide();
match = $("#items > div").find("img")
.filter(function() {
return checkedArray.indexOf($(this).attr('src')) != -1;
}).closest('.item').show();
} else {
$("#items .item").show();
}
})
#items > div {
border: 1px dotted #355B78;
margin-bottom: 10px;
}
label {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="filter">
</div>
<div id="items">
<div class="item">
<h2>Orange</h2>
<img src="orange.png" alt="" />
</div>
<div class="item">
<h2>Banana</h2>
<img src="banana.png" alt="" />
</div>
<div class="item">
<h2>Orange</h2>
<img src="orange.png" alt="" />
</div>
<div class="item">
<h2>Banana</h2>
<img src="banana.png" alt="" />
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

how to index each element in jquery - javascript

You can use, $(".thumb-wrp .thm-img").each(function() { var index = $(".thumb-wrp .thm-img").index(this) + 1; var total = $(".thumb-wrp .thm-img").length; $(this).find("span").text(index + "/" + total); }) Fiddle

Try var CurrentActive = $(this).index() + 1;

Related

How to get this code to move one class at a time

jQuery attr("src") returning undefined

Targeting issue when an item is clicked

Change background of dynamic added elements

Javascript filtering content on checkbox value

Categories

Resources