Below is my HTML. I'm at the <select> element, how do I get the text from the next span element on the page? I've tried several things, including $( this ).nextAll( 'span:first' ).text(); where $( this ) is my select element, but I'm not getting the desire result.
<ul id="questions">
<div>What do you want information about?</div>
<li>
<p>
<select><!-- This is where I'm at. -->
<option>Click to select...</option>
<option data-next_select_name="foos">
a foo
</option>
<option data-next_select_name="bars">
a bar
</option>
</select>
</p>
<div>
<a>
<span>a foo</span><!-- I want the text out of this span. -->
<div><b></b></div>
</a>
<div>
<div><input type="text" /></div>
<ul>
<li>Click to select...</li>
<li>
a foo
</li>
<li>
a bar
</li>
</ul>
</div>
</div>
<p></p>
</li>
</ul>
nextAll selects next siblings of an element, the span element is not one of the siblings of your selects element:
$(this).parent().next().find('span:first').text()
Just incase your html structure changes and .next() isn't an option, I always prefer to go up to the definitive parent (in this case the list-item)
$(this).closest('li')
.find('span').first().text();
Random side note: .first() is faster than :first
$( this ).parent().next().find('span:first').text()
Related
I know there are tons of posts out here about this but I have yet to find anything that works. I think because how deep my button is nested versus the postion of the div I am trying to effect.
Most of this is generated dynamically so I can't target IDs but I can target classes.
I have tried a number of approaches. Including:
$('div.hold:first').addClass('skinSelected');
AND
$(this).parent.parent.parent.prev('.hold').addClass('skinSelected')
AND
$(this).parent.prev('.hold').addClass('skinSelected')
This does the job to the first div with class hold but I have numerous divs with class "hold"
Here's my HTML:
<li>
<a>...</a>
<div style="display:none" class"hold">current selection</div>
<div>
<div>
<span>....</span>
<div>....</div>
<div>
<h3>...</h3>
<p>...</p>
select
</div>
</div>
</div>
</li>
Here's my javascript:
<script type="text/javascript">
function passSkinID() {
$('div.skinSelected').removeClass('skinSelected');
$(this).prevAll('.hold:first').addClass('skinSelected')
}
</script>
And here is my css
<style>
.skinSelected {
background-size:cover;
width:100%;
background:#2d67a3;
color:#FFFFFF;
display:block !important;
}
</style>
Thanks in advance for any insight!
First of all, you cannot use $(this) as it reffers to the jQuery's window object. You should pass this on click, and then wrap it into jquery object.
HTML:
select
Script:
function passSkinID(el) {
$('div.skinSelected').removeClass('skinSelected');
// use passed element instead of $(this):
$(el).closest('li').find('.hold').addClass('skinSelected');
}
DEMO
I would however do it this way:
<a href="#" class="my-btn btn btn-primary" >select</a>
Script:
$('.my-btn').click(function(e) {
e.preventDefault();
$('div.skinSelected').removeClass('skinSelected');
$(this).closest('li').find('.hold').addClass('skinSelected');
});
DEMO
Because the event is triggered on a child of a <li> tag that also contains the elements you want to manipulate, you have to travel up the DOM to that parent with closest() then find all children that have the required class:
$(this).closest('li').find('.hold').addClass('skinSelected')
This will only work if between <li> and the link you don't have other <li>'s, and if the other .hold elements that you don't want to add the class to are outside this particular <li> tree. I imagine that your DOM structure is like this:
<li>
<a>...</a>
<div style="display:none" class"hold">current selection</div>
<div>
<div>
...
<div>
...
select
</div>
</div>
</div>
</li>
<li>
<a>...</a>
<div style="display:none" class"hold">current selection</div>
<div>
<div>
...
<div>
...
select
</div>
</div>
</div>
</li>
...
For the first you need and equl in you div elemnt with class "hold"
You can do this as i have done in this jsBin http://jsbin.com/lujekojami/1/edit?html,css,js,output
I hope it helps :)
I have tried to google it and found some results in SO. However the point in the discussion is not same as mine.
Before anyone can accept my question, I want to make it clear first what I really want to get from here. As follows;
If this is a good way for me to achieve what I need with what I have now (the codes), what should I modify from there.
If this is not the good way, 'by what way' should I change and achieve it.
Oke
The scenario is:
I have at least five <li> menus in a <ul>. In each <li>, there are some hidden divs so that the <li> will only show the title of that <li> but not showing up the main content or the hidden divs.
And then, I have a blank div that I want it to automatically be filled by the main content that is being hidden from the first <li>.
After that, if the second <li> and so on is clicked, the blank div that has been filled by the main content of the first <li> will be changed according to the next chosen or the next clicked <li>.
This script that I have been using is here, but it doesnt work.
$('#zen-content').html($('#choice').val());
$('#choice').change(function(event) {
$('#zen-content').html('' + $('#choice').li()+ '');
});
And here is my html:
<ul id="choice">
<li> fisrt choice <div>hidden div that is going to show in blank div</div></li>
<li> second choice <div>hidden div...</div> </li>
<li> third choice <div>hidden div...</div </li>
<li> last choice <div>hidden div...</div </li>
</ul>
<div id="zen-content">blank div</div>
Try
$(document).ready(function(){
$('#zen-content').html($('#choice li:first').html());
$('#choice li').click(function(event) {
$('#zen-content').html( $(this).html());
});
});
Fiddle:
http://jsfiddle.net/48Qp4/
use the Click event instead of change(btw you have a typo).
demo
$('#choice li').on("click", function () {
$('#zen-content').html('' + $(this).html() + '');
});
You need to select the div inside the click li element. Example: http://jsfiddle.net/8TURA/
HTML
<ul id="choice">
<li>
Option 1
<div>option 1 hidden div content</div>
</li>
<li>
Option 2
<div>option 2 hidden div content</div>
</li>
<li>
Option 3
<div>option 3 hidden div content</div>
</li>
<li>
Option 4
<div>option 4 hidden div content</div>
</li>
<li>
Option 5
<div>option 5 hidden div content</div>
</li>
</ul>
<div id="zen-content"></div>
CSS
#choice div
{
display:none;
}
JQUERY
$('#choice li').click(
function()
{
$('#zen-content').html($(this).find('div').html());
}
);
Am trying to hide div tags inside ul tag. All tags are getting hidden if i use id of a ul tag. But i require first div tag to be shown and remaining div tags to be hidden.
html code is as follows:
<ul class="list inputControls ui-sortable" id="inputControlsContainer">
<div id="Radio" class="leaf">...</div>
<div id="Date" class="leaf">...</div>
<div id="Account" class="leaf">...</div>
<div id="Date1" class="leaf">...</div>
</ul>
script code:
<script>
jQuery(document).ready(function () {
var child=document.getElementById("inputControlsContainer").style.display='none';
});
</script>
You can use .not() along with :first selector:
$('#inputControlsContainer').find('.leaf').not(':first').hide();
Also, your HTML is currently invalid, you need to use <li> instead of <div> inside <ul>:
<ul class="list inputControls ui-sortable" id="inputControlsContainer">
<li id="Radio" class="leaf">...</li>
<li id="Date" class="leaf">...</li>
<li id="Account" class="leaf">...</li>
<li id="Date1" class="leaf">...</li>
</ul>
Fiddle Demo
Use gt:
$('#inputControlsContainer .leaf:gt(0)').hide();
Fiddle DEMO
Use Jquery to select li elements with the class selector, then bind an event handler to the click function. The bound function should find the next ul relevant to the selected element and call the toggle method upon it. By default the jquery toggle method will toggle the visibility of an element.
$(".current").click(function(){
$(this).next("ul").toggle();
});
See this Example
Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE
I have the following categories displayed in a select box:
<form>
<select class="favoritefood">
<optgroup label="Dairy products">
<option>Cheese</option>
<option>Egg</option>
</optgroup>
<optgroup label="Vegetables">
<option>Cabbage</option>
<option>Lettuce</option>
<option>Beans</option>
<option>Onions</option>
<option>Courgettes</option>
</optgroup>
</select>
</form>
Is there any way to go another level down, ie, a subcategory? I've tried using optgroup inside optgroup but it doesn't work.
Or just put one or more spaces -   - before your text in the option.
You should create a custom dropdown for this purpose. Here are the steps:
Hide the original dropdown with CSS (display:none;) OR create a hidden field that will contain the value selected by the user
<input type="hidden" name="selection" id="selection">
Create a unordered list (ul) with as many nested li and sub ul
<ul class="custom-drop">
<li class="option-group">
<ul>
<li class="heading">Vegetables</li>
<li>Cabbage</li>
</ul>
</li>
<li class="option-group">
<ul>
<li class="heading">Dairy products</li>
<li>Cheese</li>
</ul>
</li>
</ul>
Style this newly created ul as per your needs
Listen for the click event on li inside this ul and set the appropriate option inside the hidden dropdown OR set the value of hidden field so that it can be sent with the form.
So if you are using jQuery then do something like this:
$('body').on('click', '.custom-drop li', function() {
$('#selection').val($(this).text());
// Probably you want to handle showing/hiding the custom drop here
});
You cant go any deeper. It is not allowed for the optgroup.
Read this: http://www.w3.org/TR/html401/interact/forms.html#h-17.6