I have this h1 element:
<h1><a id="toobin">Text here</a></h1>
Im using this to try and show it:
$("#nav_list").click(function() {
$("h1:gt(0)").hide();
$("#toobin h1").show();
});
The first line hides all of my h1 elements and trying to show just the one too bin h1 element won't work.
If I do this $("h1").show(); I can get all of the h1 elements to show. What am I doing wrong?
I think what you want is:
$("h1:has(#toobin)").show();
The :has(<selector>) modifier selects elements that contain an element matching the parenthesized selector.
#toobin h1 means all h1 that are inside #toobin, but #toobin is inside the h1.
$("#nav_list").click(function() {
$("h1:gt(0)").hide();
$("h1:has(#toobin)").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First, won't be hidden</h1>
<h1>Will be hidden</h1>
<h1>Will also be hidden</h1>
<h1><a id="toobin">Should stay</a></h1>
<h1>Another hidden one</h1>
<button id="nav_list">Click to hide</button>
Related
This html code was generated of my php code, but I copied this out of the HTML code of the browser.
The console.log prints out undefined. I don't know why. It's probably a really dumb mistake, like always. Thank you for your help.
$('.show').click(function() {
var id = $(this).attr('id');
var div = $("div#" + id);
console.log(div.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Heading <a href='#' class='show' id='2962'>+</a></h3>
<div class='.slidetoggle' id='2962' style='display: none;'>
<p>Test!</p>
</div>
It's because the .show element is an a, not a div. The selector is wrong:
var div = $("a#" + id);
Update:
You are right, but I want to show the div, not the a
In this case you need to use DOM traversal to find the relevant element. Your current code doesn't work as you have duplicate id attributes. This is invalid as they must be unique. Try this:
$('.show').click(function() {
$(this).closest('h3').next('.slidetoggle').slideToggle();
});
.slidetoggle { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Heading +</h3>
<div class="slidetoggle">
<p>Test!</p>
</div>
<h3>Another Heading +</h3>
<div class="slidetoggle">
<p>Another Test!</p>
</div>
I don't have the reputation to comment yet so I will have to give it as an answer, but the element you want is an nchor but your jQuery selector is targeting a element.
I have several divs with the same class names and varying IDs. The ID is not set for the text I need to target
I need to target the Telephone Call text. If the div contains that text, how do I hide the containing div
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
</div>
I have tried the following to no avail
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").hide ();
});
</script>
If your code is hiding the span, but not the parent div, you can target the div to be hidden using mostly the same code you already wrote.
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").parent().hide();
});
</script>
Try selecting it's child instead of the element itself :
$(document).ready(function() {
$(".rn_FieldDisplay *:contains('Telephone Call')").hide ();
});
Try with find() function
$(document).ready(function() {
$(".rn_FieldDisplay").find(":contains('Telephone Call')").hide ();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
<p class="rn_DataLabel">Telephone Call </p>
</div>
Well you can try this:
if ($(".rn_FieldDisplay > span:contains('Telephone Call')").length > 0) {
$(".rn_FieldDisplay > span").hide();
}
could someone please write me some javaScript to show how I can mouse over an "a href" element to display a "p" element paragraph on the page.
I have the paragraph displayed:none with css; I want to associate the mouse over of a link to display the paragraph.
cheers
You dont need to use JS for this. You can do this using css also.
<a href="#link" class="hoverOn">
<p class="hoverContent">This is hover content</p>
</a>
<style>
p.hoverContent{
display:none;
}
a.hoverOn:hover p.hoverContent{
display:block !important;
}
</style>
You can use the jQuery .hover() method.
HTML
Link Hover
<p id="para">Hidden text goes here</p>
JS
$("#mousehoverhere").hover(
function() {
/* Effect during hover */
$("#para").slideDown(500);
}, function() {
/* Effect after un-hover */
$("#para").slideUp(500);
}
);
CSS
#para {
display: none;
}
Check the JSFiddle demo
I'm assuming you are not using jQuery, so you can use this piece of code to show the element when you hover the link.
document.getElementById("link").addEventListener("mouseover", function(){
document.getElementById("paragraph").style.display = "block";
});
You need to replace link and paragraph with the ID of your link and paragraph.
To also hide the paragraph again when your mouse leaves the link, add this code too:
document.getElementById("link").addEventListener("mouseout", function(){
document.getElementById("paragraph").style.display = "none";
});
I have made an example for you:
$(document).ready(function () {
var link = $('#myLink');
link.on('mouseover', function () {
$('.lorem').show();
})
})
.lorem {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
my link
<p class="lorem">
lorem ipsum
</p>
The example below works. (Example taken from w3cschools, and hacked a bit.)
Clicking anywhere in the DIV will cause the address class div to disappear.
However, changing the third line of the script to read
$("button").click(function(){
instead of "div" and it just sits there like a paperweight. What am I missing.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).children(".address").toggle("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>Island Trading</h3>
<div class=ex>
<button>Hide me</button>
<div class=address>
<p>Contact: Helen Bennett<br>
Garden House Crowther Way<br>
London</p>
</div>
</div>
<h3>Paris spécialités</h3>
<div class=ex>
<button class="hide">Hide me</button>
<div class=address>
<p>Contact: Marie Bertrand<br>
265, Boulevard Charonne<br>
Paris</p>
</div>
</div>
</body>
</html>
Change
$(this).children(".address").toggle("slow");
To something like:
$('.address').toggle("slow");
OR
$(this).siblings(".address").toggle("slow");
Once you make the listener act on the button element, .address is not a child of button any longer. It's a sibling. If there will be multiple .address classes on your page, you must use siblings.
http://jsfiddle.net/9S722/1/
Try this:
$("button").on("click", function(){
$(this).parent().children(".address").toggle("slow");
});
http://jsfiddle.net/hescano/9S722/
$(this).parent().children(".address").toggle("slow");
The button doesn't have children
$("div").click(function(){
$(this).children(".address").toggle("slow");
});
The meaning of such code above is that, when click trigger in div container, it will go through its children for matching "address" class attribute.
However, if you just change $("div") to $("button"), but no child appears within button element. nothing matches for toggle function, just ignore it.
You should change code to as below:
$("button").click(function () {
$(this).next(".address").toggle("slow");
});
which find next sibling to button element. That is the element you want.
I have this HTML:
<body>
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
<p>asdfasdfasdfas dsadf</p>
<p>asd'lfkasdf</p>
<script src="jquery.js"></script>
<script src="test.js"></script>
</body>
I want to add a class to all body elements except my first div (which has the id called switcher), when I click on the Large print button.
I have tried
$(document).ready(function(){
$("#switcher-large").bind("click", function(){
$("body:not(:first-child)").addClass("large");
});
});
and
$(document).ready(function(){
$("#switcher-large").bind("click", function(){
$("body:not(div)").addClass("large");
});
});
and
$(document).ready(function(){
$("#switcher-large").bind("click", function(){
$("body").not("#switcher").addClass("large");
});
});
but none seem to work (the class applies to all elements).
I don't want to find an alternate way like selecting only p elements. I just want to understand why the selectors I used don't work...
You need to exclude the document.body itself. Like
$("body *").not("#switcher").addClass("large");
This will query for all children of body, excluding #switcher. Maybe more convinient:
$(document.body).contents().not('#switcher').addClass('large');
$("body").children().not("#switcher").addClass("large");