<div class="show_hide panel-header" rel="#panel">
<h4>Disclaimer</h4>
</div>
<div id="panel" class="panel">
<p>Lorem ipsum</p>
</div>
Above is my HTML ... a simple div for the header (event handler) and the hidden div to show/hide. Works perfectly for a simple show/hide, but I may have several panels on screen at once and I don't want to explicitly ID each one and give it it's own function. How can I use the this selector to achieve dynamic interactions?
My JQuery currently:
<script type="text/javascript">
$(document).ready(function(){
$(".panel").hide();
$(".show_hide").show(); //Probably don't need this line...
$('.show_hide').click(function(){
$(this).children("div").slideToggle();
});
});
</script>
Any help is appreciated. I'm new to JS/JQuery and having some trouble understanding the different selectors. Thanks!
Your div isn't a child, it's the next div in line:
$(this).next("div.panel").slideToggle();
you can try this
<script type="text/javascript">
$(document).ready(function(){
$(".panel").hide();
$('.show_hide').click(function(){
$(this).next(".panel").slideToggle();
});
});
</script>
Related
I am trying to write a simple script which will be able to read/display every single DIV one by one (without interfering with the other divs inside). Unfortunately, my idea didn't work as I thought it will. I achieved what I aimed for with .children().remove().each but found out that it skips the first div and deletes all the others inside. I will be really grateful if someone can help me or point what I am doing wrong.
$(function Testing(){
$("div").each(function(){
var Div = $(this).text();
alert(Div);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Alpha">
Alpha
<div id="Bravo">
Bravo
<div id="Charlie">
Charlie
<div id="Delta">
Delta
</div>
</div>
</div>
</div>
</body>
It looks like you want to have the nested structure. If that is the case you can do it at least a couple of ways:
$(function Testing() {
$("#container div").each(function() {
// my variation on this answer: http://stackoverflow.com/a/32170000/1544886
var Div = $(this).contents().not($(this).children()).text();
/* or another way: http://stackoverflow.com/a/33592275/1544886
var Div = $(this)
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
*/
alert(Div);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="Alpha">
Alpha
<div id="Bravo">
Bravo
<div id="Charlie">
Charlie
<div id="Delta">
Delta
</div>
</div>
</div>
</div>
</div>
I added div#container ONLY because I didn't like the extra alerts generated from the divs created by having a code snippet. It's not necessary to do this in your code... you can ignore it and just use your selector $("div").
To get your desired output, you need to change your HTML so that each div only contains the text that you want it to output.
You'll notice two blank alerts when running this code snippet. This is because there are additional divs placed in the code snippet by SO (hidden). These extra alerts would not show in your local script.
$(function Testing() {
$("div").each(function() {
var div_text = $(this).text();
alert(div_text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="Alpha">Alpha</div>
<div id="Bravo">Bravo</div>
<div id="Charlie">Charlie</div>
<div id="Delta">Delta</div>
</body>
Also, use descriptive variables. It is best to start this practice now (since you're learning) so you don't form bad habits. I changed Div to div_text as an example.
I have a news page which (for the sake of length) uses a Show/Hide script for long contents.
Thing is that the script is applied globally to all the contents and I would like it to be applied to only one element or to the nearest element.
Script:
$(document).ready(function(){
$(".btn1").click(function(){
$("p.esl").hide();
});
$(".btn2").click(function(){
$("p.esl").show();
});
});
Website: http://thc-racing.com/
P.S. I'm new to jQuery so my skill are very limited.
This following code will fix your problem.
$(document).ready(function(){
$(".btn1").click(function(){
$(this).parents(".news-item").find(".esl").hide();
});
$(".btn2").click(function(){
$(this).parents(".news-item").find("p.esl").show();
});
});
this code will not hide all the p tags which only hide belongs to news item
cheers
Use id not the class
$(document).ready(function(){
$("#btn1").click(function(){
$("p#esl1").hide();
});
$("#btn2").click(function(){
$("p#esl1").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id = "esl1">Here is my paragraph!!!! Hi I can hide</p>
<p id = "esl2">Here is my paragraph!!!! Hi I won`t hide</p>
<button id = "btn1">hide</button>
<button id = "btn2">show</button>
May be this answer here, will help you understand more.
As #naveen said above is best way to deal with this kind of scenarios
$(document).ready(function(){
$(".btn1").click(function(){
$(this).parents(".news-item").find(".esl").hide();
});
$(".btn2").click(function(){
$(this).parents(".news-item").find("p.esl").show();
});
});
in this logic traversing to its part and finding its own child will solve event click problem.
I have a structure, such as
<div class="entry">
<p class="entry-text"><div class="nonmatched-sentence">some text goes here...</div></p>
</div>
how do I show all the nonmatched-sentence elements if they were made invisible before?
I now use this:
$(this).('entry-text').children('.nonmatched-sentence').show();
But it's not working...
Thanks!
You could go with this approach: http://jsfiddle.net/oejm2wfu/
For example I have created an event on the button click:
$("#btn").click(function(){
$(".nonmatched-sentence").each(function(){
$(this).show();
});
});
but you could do that on any event you want. Hope that helps
Using jQuery Mobile, I want an alert to display when the user opens a page
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page Three</h1>
</div>
<div data-role="content">
<script>alert('How are you');</script>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
But the above code shows the alert on the startup of the app and when I open the page it does nothing. Thanks in advance for your help.
With jQueryMobile there are specific events to know when the page loads.
You should instead try the following (put this in your head element, before the body):
<script>
$('#page3').live('pageshow', function() {
alert('Page ' + $(this).attr('id') + ' about to be shown');
});
</script>
You could also handle instead the 'pagebeforeshow'/'pagecreate' events.
Try this
<script>
$("div[data-role=content]").eq(0).ready(function() {
alert('How are you');
});
</script>
Do it like this. It is assumed this div is loaded after page load.
Accessed with div Id.
$('#page3').load(function() {
alert("loaded....");
});
Accessed with div class.
$('.page').load(function() {
alert("loaded....");
});
In the <head> portion of your page place the following:
<script>
$(document).on('pageshow','#page3',function(){
alert('How are you');
});
</script>
Note: the .live() method has been deprecated. See the docs for more details about why. Also the .on() method is preferred but does require that you are using jQuery 1.7+. If you are pre jQuery 1.7 use delegate instead.
<script>
$(document).delegate('#page3','pageshow',function(){
alert('How are you');
});
</script>
I am an absolute beginner in this field. I have written the following code but it's not working. Can someone explain where is the error?
<script type="text/javascript">
$("button").click(function(){
$("div").show("slow");
});
</script>
<button>show</button>
<div style="min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You execute the jQuery before the button is there. So at the point jQuery is executed, the button is not existent.
The solution is to use $(document).ready(...).
All elements on a page (HTML) are parsed to the DOM of that page. The DOM is a hierarchical collection of all elements. You can select elements out of it using jQuery.
However, obviously the DOM needs to be fully there before you can select the elements. In your case, you first select the button, and create it afterwards. That does not work. At the time of the selector the button does not exist yet.
Using jQuery's $(document).ready(), you can defer the function containing selectors until the DOM is fully loaded and parsed - at which time the selector works because the elements are there.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You may be trying to listen for the click event before the button exists. Try waiting for the page contents to load:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
As you can see from the fiddle here http://jsfiddle.net/bQUFE/ your code works (the div is shown when you click)
If you don't have this result always check:
1)that you loaded jquery before your script
2)Always use $(document).ready() like this:
$(document).ready(function(){
$("button").click(function(){
$("div").show("slow");
});
});
the javascript is executed before the document has loaded, so the click-handler can't be attached to the button. to avoid this, wrap your code into a domready-function like this:
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
}
It probably is working but as your <div></div> is empty you might notice it.
Also make sure you only run your JQuery script AFTER the div has been added to your HTML.
May I also suggest to use better identifiers, because you might eventually have many div's and buttons on your page.
Example:
<button id="btn1">Click me</button>
<div id="hidden_div" style="display: none">
Hello there!
</div>
<script type="text/javascript">
$('button#btn1').click(function() {
$('div#hidden_div').show('slow');
});
</script>
You code runs before the button is created so it cannot bind the event.
So you need to put your code in the document.ready event. In jQuery this is handled by $(document).ready(handler) or $(handler).
Documentation at http://api.jquery.com/ready/
Fix to your code to make it work
$(function(){
$("button").click(function(){
$("div").show("slow");
});
});
demo at http://jsfiddle.net/gaby/vkrzt/
you need to give your elements "id"
so:
<button id="mybutton"></button>
and
<div id="mydiv"></div>
Then you'll use $("#mybutton") or $("#mydiv") to call these