jQuery: How to .show() an element with class that contains specific text? - javascript

Update:
I have updated the question with the code I am using, for example based on (select) element if (option)paint(/option) selected I want to show or hide the whole "working class" div .working or if (option) Body Shop (/option) selected I want to show the whole "non-productive class" div .non-productive
I have multiple HTML elements with similar divs structure but different class names however some of these divs do share certain text, how can I use .show() to show those divs using their .class name which contains that certain shared text?
$('#qualifications').change(function(){
if($('#qualifications').val() == 'Paint'){
$('div:contains("Paint")').show();
}
})
});
this is bad example cause I want to target the element using class name instead of ('div:contains('Paint')')
here's the code:
<select id='qualifications'>
<option>All</option>
<option>Body Shop</option>
<option>Electrician</option>
<option>Mech</option>
<option>Paint</option>
</select>
<!-- Working Class -->
<div class="working">
<div class="working-indicator">
<p>W</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Dennis Bokenkamp </h6>
<p><b><i>Paint</b></i></p>
<p>FIA</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>10:09:00 AM</p>
</div>
</div>
</div>
<!-- Non-Productive Class -->
<div class="non-productive">
<div class="non-productive-indicator">
<p>N</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Rick Richard </h6>
<p><b><i>Bodyshop 200%</b></i></p>
<p>DNF</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>11:09:00 AM</p>
</div>
</div>
</div>

Try this :
$(document).ready(function(){
$("#qualifications").on("change",function(){
if($(this).val() == 'Paint')
$("div.working:contains(Paint)").show();
})
})
I in below example use red border instead of show , because To show you what selected if you select paint of select box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<select id='qualifications'>
<option>All</option>
<option>Body Shop</option>
<option>Electrician</option>
<option>Mech</option>
<option>Paint</option>
</select>
<!-- Working Class -->
<div class="working">
<div class="working-indicator">
<p>W</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Dennis Bokenkamp </h6>
<p><b><i>Paint</b></i></p>
<p>FIA</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>10:09:00 AM</p>
</div>
</div>
</div>
<!-- Non-Productive Class -->
<div class="non-productive">
<div class="non-productive-indicator">
<p>N</p>
<div class="user-circle">
<img src="imgs/usericon.png">
</div>
<div class='user-info'>
<h6> Rick Richard </h6>
<p><b><i>Bodyshop 200%</b></i></p>
<p>DNF</p>
</div>
<div class='user-clocking'>
<img src="imgs/clockicon.png">
<p>10/8/2016</p>
<p>11:09:00 AM</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#qualifications").on("change",function(){
if($(this).val() == 'Paint')
$("div.working:contains(Paint)").css({border:"2px solid red"});
})
})
</script>
</body>
</html>

You can just use this syntax: $('div[class*="Paint"]').show()

Related

Can I check with jQuery if element has specific class and edit only this element?

if (jQuery("li.store .premise")[0]) {
jQuery(".address .arrow").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="store">
<div class="address">
<span class="arrow"></span>
<div class="results-toggle">
<div class="shop-address">
<div class="street-block">
<div class="thoroughfare">demo address</div>
<div class="premise">additional info</div>
</div>
<div class="addressfield-container-inline locality-block country-BG"><span
class="locality">New York</span></div>
<span class="country">USA</span>
</div>
<div class="shop-phone">+1 4258741</div>
</div>
</div>
</div>
Is there a way to check if an element contains specific class and if it does, then to edit only this or these elements.
I have a list of stores and I want if some of them contain specific class to remove the arrows.
I tried with this but it removes all elements with a class arrow and I want to remove the only storeеthat have the specific class which in this case is class="premise"
Closest using get parent element then find class for .arrow then remove method using removed.
$(".store .premise").closest(".address").find('.arrow').remove();
Once you have a collection of premises, use .closest to navigate to their ancestor address, from which you can get to the .arrows:
$('div.store .premise').closest('.address').find('.arrow').remove();
(assuming that the .store element in your actual code is a <li>, otherwise use div.store or just .store)
$('div.store .premise').closest('.address').find('.arrow').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="store">
<div class="address">
<span class="arrow">arrow here</span>
<div class="results-toggle">
<div class="shop-address">
<div class="street-block">
<div class="thoroughfare">demo address</div>
<div class="premise">additional info</div>
</div>
<div class="addressfield-container-inline locality-block country-BG"><span class="locality">New York</span></div>
<span class="country">USA</span>
</div>
<div class="shop-phone">+1 4258741</div>
</div>
</div>
</div>

if parent has child class then hide mother div secondchild class with CSS or Jquery

Will you please tell me that how i hide mother .secondchild if parent has child class.
Here is the code
HTML code
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
Here is my script but not working
if ($(".parent").hasClass("child")) {
$('.mother .secondchild').hide()
}
since your parent div has no class called child, your script won't give the desired output.
try this
if($('.parent').children().hasClass('child')){
$('.mother .secondchild').hide();
}
DEMO HERE
EDIT
Based on OP's Comment hidden the div in the button click.
Html
<button id="btnClick">
Click Me
</button>
JS
$('body').on('click','#btnClick','',function(){
if($('.parent').children().hasClass('child')){
$('.mother .secondchild').hide();
}
});
UPDATED DEMO
$(function(){
$("body").on("click",".click",function(){
if ($(".parent ").children("div.child")) {
$('.mother .secondchild').hide()
}
})
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
<button class="click">
button
</button>
</body>
</html>
Do this work without any if condition
$(".parent:has(.child)").next().find(".secondchild").hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">
children
</div>
</div>
<div class="mother">
<div class="secondchild">
second-child
</div>
</div>
You just change "hasclass" to "has", then it works.
if($('.parent').has('.child')){
$('.mother .secondchild').hide();
}

Angularjs function won't work with <div> element?

I have a number of <div> tags and I'm assigning them a function that allows me to display a kind of modal with details from the <div> element by changing it's css propriety 'display' to 'block' instead of 'none'. for some reason the modal doesn't display when I click on the <div> element. but when I assign the same function to a button it does.
$scope.CountryDetailStyle = {
'display': 'none'
};
$scope.CountryDetail = function(idCount, nameCount, descCount) {
$scope.detailId = idCount;
$scope.detailName = nameCount;
$scope.detailDesc = descCount;
$scope.CountryDetailStyle = {
'display': 'block'
};
// alert('idCount : '+idCount+' nameCount : '+nameCount+' descCount : '+descCount);
}
<div id="pageContent" ng-controller="myAdminController">
<div class="countries" ng-repeat="country in countries" title="{{country.descCount}}" ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)">
<label> {{country.nameCount}} </label><br/>
<img ng-src="uploads/{{country.image}}" alt="Image Not Found"><br>
</div>
</div>
<div>
<button ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)" style="display:block; float:right; clear:both;">Display Country Detail</button>
</div>
<div class="countryDetails" ng-style=CountryDetailStyle>
<!--this is the modal i want to display -->
<div class="content">
<div class="boxHeader">
<label>{{detailName}}</label>
</div>
<div class="boxContent">
<form>
<p>{{detailDesc}}</p>
Read More
</form>
</div>
</div>
</div>
can someone tell me what's the problem? thanks.
you should not display/hide elements based on some display: none condition. thats what ng-show (and ng-if) is for. Use a $scope variable like $scope.isModalVisible and set that to true or false.
Then you can use on your element ng-show="isModalVisible"
var app=angular.module("myApp",[]);
app.controller("myAdminController",["$scope",function($scope){
$scope.CountryDetailStyle = {'display': 'none'};
$scope.countries=[
{
idCount:"1",
nameCount:1,
descCount:1
},{
idCount:"2",
nameCount:2,
descCount:2
},{
idCount:"3",
nameCount:3,
descCount:3
},{
idCount:"4",
nameCount:4,
descCount:4
}
]
$scope.CountryDetail = function(idCount, nameCount, descCount){
$scope.detailId = idCount;
$scope.detailName = nameCount;
$scope.detailDesc = descCount;
$scope.CountryDetailStyle = {'display': 'block'};
}
}]);
<html lang="en">
<head></head>
<body ng-controller="myAdminController" ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="pageContent">
<div class="countries" ng-repeat="country in countries" title="{{country.descCount}}" ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)">
<label> {{country.nameCount}} </label><br/>
<button ng-click="CountryDetail(country.idCount, country.nameCount,
country.descCount)" style="display:block; float:right; clear:both;">Display Country Detail</button>
</div>
<br><br>
<div class="countryDetails" ng-style=CountryDetailStyle>
<div class="content">
<div class="boxHeader">
<label>{{detailName}}</label>
</div>
<div class="boxContent">
<form>
<p>{{detailDesc}}</p>
<a href="#" class="btn" style="text-decoration:none;" >Read More</a>
</form>
</div>
</div>
</div>
</body>
</html>
So I found a solution, still don't know why it works but it does. I moved the </div> of the div with the id="pageContent" to just before the body closing tag. That fixed everything. Thank you guys for the help.

I want the station name to be changed when user clicks play button

I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>
Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/
So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});​
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/

Need DIV show/hide Switch to happen AFTER SlideToggle occurs

I have a series of "product" divs in a grid, each of which is clickable. When one is clicked, the corresponding "product info" DIV slides down to reveal the corresponding product info. I have it working somewhat but I'm having a couple of issues.
How can I make it so that when one set of info is showing, but ANOTHER "product" div is clicked, the current info slides into hidden status, the product info is switched and THEN the new info is revealed. Make sense?
If the code below doesn't make sense, the direct link is here
This is the HTML for the hidden info. The class 'selected_show' is styled with "display:none;" to start:
<section>
<div class=selected_show>
<div>
<div class="product_info grassone piece_info">
<img src="./images/detail_info/astronomical.jpg">
<div>
<p>Short description of the piece...</p>
</div>
</div>
</div>
<div>
<div class="product_info competitive piece_info">
<img src="./images/detail_info/astronomical.jpg">
<div style="background:red;">
<p>Short description of the piece...</p>
</div>
</div>
</div>
<div>
<div class="product_info magpie piece_info">
<img src="./images/detail_info/astronomical.jpg">
<div style="background:blue;">
<p>Short description of the piece...</p>
</div>
</div>
</div>
</div>
</section>
This is where the info is chosen:
<section>
<div class="piece woodcut">
<p>GRASSONE</p>
</div>
<div class="piece woodcut">
<p>COMPETITIVE</p>
</div>
<div class="piece woodcut">
<p>MAGPIE</p>
</div>
</section>
This is the script for the effect:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$('a.showinfo').click(function(e){
e.preventDefault();
$("html, body").animate({ scrollTop: 100 }, "slow");
$(".selected_show").slideToggle();
var a_href = '.'+ $(this).attr('href');
$('.product_info').hide();
$(a_href).show();
});
</script>
Ideas?
Use the slideToggle's callback:
$(".selected_show").slideToggle(1000, function(){
$('.product_info').hide();
});

Categories