I have a trouble with jquery index function.
I have div with another divs in it, and I want to figure out if its first, second or third div inside that parent div.
So ia have something like this:
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
Now, when I click on the last child for example, the event.target will be last div with class row.
Now I do:
$(event.target).parent().index($(event.target));
But this fails as its returning me value -1 insted of 2 ( if indexed from zero ).
Do you have any idea? Thank you.
EDIT:
So, I'm simplified the structure first and thought I just need to understand the concept, but looks like you need to know whole structure so here it is:
<div class="ten wide column schichtplan-body">
<div class="row">
<div class="eight wide column"></div>
<div class="eight wide column schicht-buttons">
<!-- Radio buttons for schicht selection -->
<div class="ui form">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="schichtMode" value="8hx3">
<label>8 Stunde schicht</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="schichtMode" value="12hx2">
<label>12 Stude schicht</label>
</div>
</div>
</div>
</div>
<!-- End of radio form -->
</div>
</div>
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active"> {{day.date.sec|date('d.m.Y')}}</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">F</div>
<div class="">N</div>
<div class="">frei</div>
</div>
</div>
</div>
I click on one of the buttons, but I want to find out the index of the .ui.grid.row in which the buttons are. So I need to go throught few parent element and then find which .ui.grid.row is actually selected relatively to .ten.wide.column
You need to use the following jQuery :
$(".column div").click(function () {
alert( $(this).index() );
});
NOTE : This will return a zero-based index
See this below :
$(".column div").click(function () {
alert( $(this).index() );
});
.row {
background-color: orange;
margin: 10px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
EDIT : Based on my understanding of the edited part of the question, here's the answer. The second alert will give you the index of the ui grid row (which will contain the clicked element) with respect to the main ten wide column. I have added coloring to make it clear. Please see this below :
I am not sure if javascript's alerts do display here. In case it doesn't, check out this fiddle : http://jsfiddle.net/ynu0x0jw/
$(".button-row > div").click(function () {
$(this).addClass('red');
var currentElementIndex = $(this).index();
var parentIndex = $(this).closest(".ui.grid.row").index();
alert("Index of the selected element with respect to its parent (div with class of ui.grid.row) is " + currentElementIndex);
$(this).removeClass('red');
$(this).closest(".ui.grid.row").addClass('red');
alert("Index of the selected element's parent (ui.grid.row) with respect to the main container (ui.grid.row) is " + parentIndex);
$(this).closest(".ui.grid.row").removeClass('red');
});
.button-row > div {
background-color: orange;
cursor: pointer;
margin: 10px;
height: 50px;
text-align: center;
transition: all 0.4s ease-in;
}
.ui.grid.row {
background-color: white;
transition: all 0.4s ease-in;
}
.button-row > div.red, .ui.grid.row.red {
background-color: red;
}
<div class="ten wide column schichtplan-body">
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active">First ui.grid.row (Index : 0)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">A (Index : 0)</div>
<div class="">B (Index : 1)</div>
<div class="">C (Index : 2)</div>
</div>
</div>
</div>
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active">Second ui.grid.row (Index : 1)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">D (Index : 0)</div>
<div class="">E (Index : 1)</div>
<div class="">F (Index : 2)</div>
</div>
</div>
</div>
<div class="ui grid row">
<div class="four wide column">
<div class="date-field active">Third ui.grid.row (Index : 2)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">G (Index : 0)</div>
<div class="">H (Index : 1)</div>
<div class="">I (Index : 2)</div>
</div>
</div>
</div>
<div class="ui grid row" id="III">
<div class="four wide column">
<div class="date-field active">Fourth ui.grid.row (Index : 3)</div>
</div>
<div class="twelve wide column">
<div class="button-row">
<div class="">J (Index : 0)</div>
<div class="">K (Index : 1)</div>
<div class="">L (Index : 2)</div>
</div>
</div>
</div>
</div>
Hope this helps!!!
You need to use $(this).index() or $(event.target).index() asssuming you want the index of the specific row. Below example is with the .click, but it will work as long as this or event.target is one of the row div.
$('div.row').on('click', function(event) {
$('#result').html($(event.target).index()); //or use $(this).index()
});
.row {
height: 10px;
background-color: lightblue;
margin: 5px;
}
#result {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
<div>Index is: <span id="result"></span>
</div>
Related
I'm trying to select a single sibling further up in the DOM after clicking a button. I only want to find the closest sibling upwards (in production there's a lot more HTML between the buttons, so it's more necessary to split it up this way). I'm using a prevAll(selector:first) to do this, and when I use a very simple version (here), it seems to work ok. But when I do it in a way that's more similar to my actual environment, prevAll() can't seem to find the sibling element div.googleMapsContainer:
Here is my HTML:
<div style="display: none;" class="googleMapsContainer" id="gm1">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
<div style="display: none;" class="googleMapsContainer" id="gm2">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<br>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
And here is my JavaScript:
$(document).on('click', '.gmapInit', function() {
console.log("here is this: ");
console.log($(this));
var closeThing = $(this).prevAll("div.googleMapsContainer:first");
console.log("here is the closest: ");
console.log(closeThing);
closeThing.attr("style", "");
});
The console shows that the closeThing is nothing, as the prevAll was not successful. Here's a JsFiddle for demonstration: https://jsfiddle.net/NateH06/twk9mtjg/
This one is working for me, I just modified your Fiddle.
I selected the parent div that was in the same scope and then used your prevAll() call to precise my selection. What happens when you try this in your actual Project?
Have a look:
$(document).on('click', '.gmapInit', function() {
var closeThing = $(this).parents("div.tableProcessingToolBarContainer").prevAll("div.googleMapsContainer:first");
closeThing.attr("style", "");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: none;" class="googleMapsContainer" id="gm1">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
<div style="display: none;" class="googleMapsContainer" id="gm2">
<div class="gmap" style="max-width: 80%;
max-height: 400px;
background-color: grey;" class="map">
</div>
This Text Should be visible after click
</div>
<br>
<div class="tableProcessingToolBarContainer">
<div class="container-fluid tableProcessingTools" >
<div class="row-fluid">
<div class="appSliderContent tptSliderContent container-fluid ">
<button class="gmapInit glassyButton">View data in Google Maps</button>
</div>
</div>
</div>
</div>
I am trying to do a feed in HTML like facebook or twitter that contains the content of database.
I am using an generic div and using javascript to clone that generic div but I cant edit the content of each element after cloning it.
Is that the best way to do a feed in HTML?
JavaScript
for(i=0 ; i < 5 ; i++){0
var item = $("#template2 div.item").clone();
item.getElementById("title").text("aaaa"); //4 testing
$("#main1").append(item);
}
HTML
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12"><hr></div>
</div>
</div>
</div>
clone() returns object that you can manipulate using jQuery.
$('#addFeed').click(function() {
addFeed();
})
function addFeed() {
var item = $("#template2 div.item").clone();
$(item).find("h3").html("New Feed");
$("#main1").append(item);
}
.feed {
border: 1px solid black;
width: 150px;
}
.item {
background-color: lightgreen;
}
.item:nth-child(odd) {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=template2>
<div class="item">
<div class="row">
<div class="col-sm-10">
<h3 id="title"></h3>
</div>
</div>
<div class="row divider">
<div class="col-sm-12">
<hr>
</div>
</div>
</div>
</div>
<div id="main1" class="feed">
</div>
<button id="addFeed">Add Feed</button>
I'm looking for a way to change the background color of multiple columns based on a range of numeric values. I know of the Colorjizz PHP library but not sure if it's what I need for my purpose. I need the columns in the code below to change their background color to the respective shade of green/red/orange based on a range of numeric values. For example from 1-100 or 0.1 to 10.0.
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
You could try grabbing the innerHTML of each div with the "well" class and then assuming that is a number between 0 and 10, set the opacity of the div to be that number divided by 10. So if the innerHTML is 2, then the opacity is set to 0.2.
I've added some Javascript to your snippet to make this happen.
You could change the math in this to make it 1-100 or something else.
function wellColorShade() {
var wells = document.getElementsByClassName("well");
for(var i = 0; i < wells.length; i++) {
var well = wells[i];
well.style.opacity = (well.innerHTML / 10);
}
};
wellColorShade();
.green-bg {
background-color: green!important;
color: white;
}
.red-bg {
background-color: red!important;
color: white;
}
.orange-bg {
background-color: orange!important;
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well green-bg">1
</div>
</div>
<div class="col-md-12">
<div class="well red-bg">3
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well orange-bg">2
</div>
</div>
<div class="col-md-12">
<div class="well green-bg">4
</div>
</div>
</div>
</div>
</div>
</div>
I need to generate table code based on div hover count, that means I have number of divisions like table rows and cells on hover of those I need to get count like 7*5 (means 7 rows 5 columns).
For more details please see below Image
How can I get that 7x5 based on position of hover div.
I am attaching general code(Fiddle) please improve this with JavaScript.
.row{
margin-bottom:5px;
}
.cell{
width:20px;
height:20px;
border:1px solid black;
display:inline-block;
}
.row:hover .cell:hover{
background:green;
}
<div class="MainDivision">
<div class="firstrow row">
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="secondrow row">
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
<div class="thirdrow row">
<div class="cell"> </div>
<div class="cell"> </div>
<div class="cell"> </div>
</div>
</div>
<div class="Value">
<span id="noOfRow">n</span>
x
<span id="noOfColumns">n</span>
</div>
Thanks in advance.
use the jquery index() function to get the position of the element
try:
$('.cell').on('hover',function(){
$('#noOfRow').text(parseInt($(this).parent('.row').index())+1);
$('#noOfColumns').text(parseInt($(this).index())+1);
});
or
$('.cell').hover(function(){
$('#noOfRow').text(parseInt($(this).parent('.row').index())+1);
$('#noOfColumns').text(parseInt($(this).index())+1);
});
or with background:
$('.cell').hover(function(){
$('.cell').css({background:'#fff'});
for (var j = 0;j <= parseInt($(this).parent('.row').index());j++ ) {
for (var i = 0;i <= parseInt($(this).index());i++ ) {
$(this).parents('.MainDivision').find('.row').eq(j).find('.cell').eq(i).css({background:'green'});
}
}
$('#noOfRow').text(parseInt($(this).parent('.row').index())+1);
$('#noOfColumns').text(parseInt($(this).index())+1);
});
jsfiddle: http://jsfiddle.net/5ck7w2mt/8/
I have a basic HTML using bootstrap, container > row > col > div ID > panel in that order, the class is placed in div ID, the thing is that I need to remove that class from that DIV and put it in another DIV(the one you click on), I know how to check if the class exist in any div inside of a div but I don't know how to delete it from there and add it to another.
I have made a Fiddle to illustrate this question. When you load the page, the class is already there. If you click any of the boxes it will alert you that in fact the class exist but don't know which div has it. The idea is to remove the class from whaveter that might be and add it to the div you click.
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="s1">
<div class="panel panel-default">
<div class="panel-heading">1</div>
<div class="panel-body">1</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s2" class="selection">
<div class="panel panel-default">
<div class="panel-heading">2</div>
<div class="panel-body">2</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s3">
<div class="panel panel-default">
<div class="panel-heading">3</div>
<div class="panel-body">3</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s4">
<div class="panel panel-default">
<div class="panel-heading">4</div>
<div class="panel-body">4</div>
</div>
</div>
</div>
</div>
</div>
JS
$("#s1").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s2").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s3").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
$("#s4").click(function() {
if($(".selection")[0]) {
alert('Class exist');
$(".selection")[0].removeClass('.selection');
}
});
You can reduce your code to:
$("#s1,#s2,#s3,#s4").click(function () {
$(".selection").removeClass('selection');
$(this).addClass('selection');
});
jsFiddle example
In your example:
$(".selection")[0].removeClass('.selection'); doesn't need [0] and there should be no period in the class you pass to removeClass()
You reference the div you click on with $(this)
As long as the selection class exists somewhere, if($(".selection")[0]) { will always be true, so it didn't really make sense to use that as a condition.
Here is a way to achieve what you required . What i have done with your code is
HTML
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="s1" class="divs">
<div class="panel panel-default">
<div class="panel-heading">1</div>
<div class="panel-body">1</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s2" class="selection divs">
<div class="panel panel-default">
<div class="panel-heading">2</div>
<div class="panel-body">2</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s3" class="divs">
<div class="panel panel-default">
<div class="panel-heading">3</div>
<div class="panel-body">3</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div id="s4" class="divs">
<div class="panel panel-default">
<div class="panel-heading">4</div>
<div class="panel-body">4</div>
</div>
</div>
</div>
</div>
</div>
CSS
.container {
max-width:400px;
}
#s1:hover, #s2:hover, #s3:hover, #s4:hover {
border: 1px solid black;
cursor: pointer;
}
.selection {
background-color: black;
padding:15px;
}
JQUERY
$(document).ready(function(){
$(".panel").on("click",function(){
var divid="#"+$(this).parent().attr("id");
$(".divs").removeClass("selection");
$(divid).addClass("selection");
});
});
Note that i have just added a simple class as "divs" to each of the parent div of the panel.
What i have done here is i have first got the id of the parent div of the panel which has been clicked by the user . Then i have removed the class "selection" from the parent divs "s1 s2 s3 s4" accessing it with the help of the common class "divs" . then i have added the class "selection" to the div which has been clicked.
Here is the DEMO for your reference.
NOTE: This code will work for any number of panels you create.
do it like this:
$("#s1").click(function() {
// Check class on the clicked section
if($(this).hasClass('selection') ) {
alert('Class exist');
// class found then remove it.
$(this).removeClass('.selection');
}
});
Take a look on these to know more: .hasClass(), .addClass(), .removeClass()