Wonder if someone could point in the right direction here i'm trying to show the 'next' element on page with the matching class name i.e. the one directly underneath the link.
$(function() {
$("div.std-centered").hide();
$("a.show_hide").click(function(e) {
e.preventDefault();
$(this).closest('div.std-centered').next().show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 col sameHeight">
<p>Some blurb i</p>
</div>
<div class="col-sm-2 col text-center sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
</div>
<div class="row">
<div class="col-sm-12 std-centered">
<p>This is the content</p>
</div>
</div>
The div with the class std-centered is hidden (in jQuery) and I'm trying to find and show it when the show_hide link is clicked.
But I just can't seem to get a handle on that div. Could someone point me in the right direction please?
Thanks,
C
The issue is because closest() searches up the DOM to find parent elements, yet the .std-centered div is a sibling of a parent and hence will not be found.
To fix this you could instead use closest() to find the .row, then the next('.row') and finally find() to get the element you want, like this:
$(function() {
$("div.std-centered").hide();
$("a.show_hide").click(function(e) {
e.preventDefault();
$(this).closest('.row').next('.row').find('div.std-centered').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 col sameHeight">
<p>Some blurb i</p>
</div>
<div class="col-sm-2 col text-center sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
</div>
<div class="row">
<div class="col-sm-12 std-centered">
<p>This is the content</p>
</div>
</div>
Use this selector $(this).closest('div.row').next(".row").find('.std-centered').show();
Closest() -> find the first parent with specified parameter
$(function() {
$("div.std-centered").hide();
$("a.show_hide").click(function(e) {
e.preventDefault();
$(this).closest('div.row').next(".row").find('.std-centered').show();// since element std-centered is found in row tthat is next to row that is closest to show_hide
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 col sameHeight">
<p>Some blurb click</p>
</div>
<div class="col-sm-2 col text-center sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
<div class="col-sm-2 text-center col sameHeight">
<p><span class="glyphicon glyphicon-ok"> </span></p>
</div>
</div>
<div class="row">
<div class="col-sm-12 std-centered">
<p>This is the content</p>
</div>
</div>
Related
I need help whenever i click on div with .clickable class .bg-color class will be added to span.aa and span.aaa and when i select option any other option like c other from other option .bg-color class will be removed i tried many other methods but its not working kindly help me get through this
$('.clickable').on('click',function(){
$('.aa .aaa').removeClass('bg-color');
$(this).addClass('bg-color');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="div input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class=" aa input-group-text bor-clr" id="basic-addon1">A</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Full time</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">B</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Part Time</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">C</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Pinch</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">D</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Weekend Worrior</span>
</div>
</div>
</div>
</div>
You are selecting elements which each has multiple classes, it must be selecting elements which each has one of these classes. Below is a worked solution
$('.clickable').on('click', function() {
$('.aa, .aaa').removeClass('bg-color')
$(this)
.parent()
.find('.aa, .aaa')
.addClass('bg-color')
})
I created HTML where I want if user hit <img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"> then 123456789 will fill in textbox dynamically (each-one for different value as in <a> tags) and the border of that selected div will red. I try to search this method on google but I couldn't find that and I am familiar with Js and Jquery so I cant do this But Stack-overflow is developer friends and here millions of well developers and students who helps everyone. Please help to how i made this function.
My code is given below:
<div id="scroll" style="overflow: auto;height:375px">
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Shiv</span>
<a data-number="123456789" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
<span class="f_13">123456789</span><br>
</div>
</div>
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Dummy</span>
<a data-number="1253648595" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
<span class="f_13">1253648595</span><br>
</div>
</div>
If i understood correctly,
$(function(){
$('.toggle_contact').click(function(){
var contactNumber = $(this).data('number');
$(this).parents('.this_contact').addClass('selected').siblings().removeClass('selected');
$(this).parents().find('input:text').val(contactNumber);
})
})
.selected{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroll" style="overflow: auto;height:375px">
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Shiv</span>
<a data-number="123456789" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>
<div class="row pt-5 pb-5 mb-5 this_contact">
<div class="col-xs-3"><img src="https://img.icons8.com/bubbles/2x/administrator-male.png" height="40"></div>
<div class="col-xs-9 no-col-r">
<span class="f_17">Dummy</span>
<a data-number="1253648595" class="toggle_contact"><img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img"></a><br>
</div>
</div>
<input type="text" name='name' value="">
I have 3 div's in a View. Every div has unique single_value. so when i click on any of that it should alert that data value. For that i used the following script
$(document).on('click','.single_school',function(){
var school = $( ".single_school" ).attr('data-value');
alert(school)
});
But the problem is i'm only getting the first value whatever div I clicked on. How do i print only the specific div I clicked on.
Here is the View:
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="1">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">ABC</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="2">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">XYZ</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="3">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">PQR</p>
</div>
</div>
</div>
$(document).on('click','.single_school',function(){
var school = $(this).attr('data-value');
alert(school)
});
You should use JQuery data() to fetch the value when clicked on the element. And secondly you should use $(this) to get the current element value and not the classname. In your code, it would always give one result because you are using $( ".single_school" ). This should be replaced with $(this):
$(document).on('click', '.single_school', function() {
var school = $(this).data('value');
alert(school)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="1">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">ABC</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="2">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">XYZ</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="3">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">PQR</p>
</div>
</div>
</div>
I have product that I want to display in every four cols of materialize. How can I achieve that task using ng-repeat?
Content of main.html:
<div class="row">
<div class="col s12 m4">
<div class="card blue-grey darken-1" ng-repeat="laptop in data">
<div class="card-content white-text">
<span class="card-title">{{laptop.name}}</span>
</div>
<div class="card-action">
{{laptop.Brand}}
</div>
</div>
</div>
</div>
Just put the ng-repeat on the col instead of the row..
<div class="row">
<div class="col s12 m4" ng-repeat="laptop in data">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">{{laptop.name}}</span>
</div>
<div class="card-action">
{{laptop.Brand}}
</div>
</div>
</div>
</div>
Example: http://www.codeply.com/go/3rRmpU0NC3
The icon and the word hi can not be put into the same line
<link href="http://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet"/>
<div class="row">
<div class="col">
<h5 class="title">hi</h5>
</div>
<i class="icon ion-ios-heart"></i>
</div>
Thanks!!
Method 1 - CSS
<div class="row">
<div class="col">
<span class="item">
<h5 style="display:inline" class="title">hi</h5>
<i class="icon ion-ios-heart"></i>
</span>
</div>
</div>
Method 2 - In same column
<div class="row">
<div class="col">
<h5 class="title">hi<i class="icon ion-ios-heart"></i></h5>
</div>
</div>
Method 3 - In two columns in same row
<div class="row">
<div class="col">
<h5 class="title">hi</h5>
</div>
<div class="col">
<i class="icon ion-ios-heart"></i>
</div>
</div>
h5 will display as a block, so it has its own line.
Should work with the icon inside the h5 tags, though.