I am looping through some unordered lists and I'd like to get all of the descendants by using only the saved selectors (both of which are wrapped with jquery objects).
Here is my sample HTML:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
<ul>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
<ul>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
</ul>
<ul>
<li>item 16</li>
<li>item 17</li>
<li>item 18</li>
<li>item 19</li>
<li>item 20</li>
</ul>
Here is my sample JS:
$(document).ready(function() {
allUls = $('ul');
allAs = allUls.find('a');
// shouldn't this next line get all anchors within the second unordered list?
console.log( allUls.eq(1).find(allAs) );
});
So there it is. I was expecting for an array of anchors that are descendants of the second list to be sent to the console. But that's not the case.
You can see for yourself on my jsfiddle example: http://jsfiddle.net/u6uf4/
I'm also open to any "better" solutions you may have. Just keep in mind, I'd like to use only the saved selectors and would like to avoid creating any new selectors for this task.
Thank you for your time and effort for helping a fellow Jquery-er!
The option to pass a jQuery object to find() was only recently added in version 1.6. Your jsfiddle example uses version 1.5.2. Select the latest jQuery version on the left to make it work.
Close, but you don't need to filter by allAs, just filter by 'a'.
allUls.eq(1).find('a')
Related
I create simple drop down menu using Foundation 6
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Now i want to on different event ( like other button to hide or show menu.) But in doc there is no method to do this. When I use jquery trigger on click also not working is there any solution for this ?
Attach an event handler to an element (for example a button) and give it a function like hiding the dropdown menu:
$("button").click(function(){$(".dropdown").hide()})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button>
I'm a button
</button>
To allow it to come back again, try $("button").click(function(){$(".dropdown").toggle()})
I'm having a problem with jQuery.
I'm doing a mobile menu using jQuery with sub menus. I need to use the same class to activate all the menus because they will be created dynamically, but when I do this, when I click on a item, all the others show their sub-item too.
To be clear, here's an example:
<ul>
<li class="OpenMenu">Menu 1
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="OpenMenu">Menu 2
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="OpenMenu">Menu 3
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
I need each menu to show its sub-items only when is clicked, but all using the same class. I'm doing the "open" effect of the menus with jQuery.
You can achieve by below code, find() method will drill down to only its child items and find sub items
$(".OpenMenu").click(function(){
$(this).find('.sub-item').show();
});
DEMO (covers only displaying required sub menu)
To view how to hide other sub items and display only current items, use this http://jsfiddle.net/Lboyrqnc/2/
I am trying to create a menu formated by jQuery. The appearance and functionality of level one items is correct, but the subsquent levels are not correctly formatting as a submenu that appears with mouse over. Rather it simply appears, and does not highlight the items as the level one items do with mouse over or hover (neither function appears in my code).
HTML CODE
<div style="width: 25%">
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
jQuery or JavaScript
$(document).ready(function() {
$('#menu').menu({menus: "div"});
});
JS Fiddle
I figured it out. It is a matter of simply deleting in the JavaScript the following from line 6:
{menus: div}
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="info-1></div>
<div id="info-2></div>
And when you hover over one of the items a window is displayed with some info regarding the item. I have worked this out for one item, now I wanna know how I can make this work for the entire list.
My initial thought was to create one script per each item... but that seems a bit thick considering the functionality of js.
Javascript
$(function(){
$('pop il li').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
Now I need the following. Once the "window" is displayed on hover, in I need the window to stay open in some way for me to be able to scroll through the content using my mouse. This is mainly because I have some links inside it and need to access them! Right now, As soon as i leave the li item, the window of course disappears... which is not fun. So, how can i solve it?
UPDATED
I would make one function to handle the action you want for these. Make sure the 'info' divs are in the same order as the 'pop' li's
Here is an example FIDDLE
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
Then use this jquery
$('#pop li').mouseover(function() {
$('.info').hide();
var x = $(this).index();
$('.info').eq(x).show();
});
$('.info').mouseout(function(){
$(this).hide();
});
I have a table with some rows and and cells. Using jQuery UI Selectable how can I customize the selection so it's only possible to select cells following each other. It shouldn't be possible to select cells vertically across rows without selecting the cells between.
Any solutions?
Use the selected callback to add a class to the selected element; The class which you will use to tie .selectable(). You can then use the next siblings selector in combination with this, and you should be able to accomplish what you need.
To start off, you're going to want something like the following:
<ol>
<li class="ui-widget-content ui-selectee">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
Then, as you select one, which will fire the callback, you want to make the second selectable.
<ol>
<li class="ui-widget-content ui-selectee ui-selected">Item 1</li>
<li class="ui-widget-content ui-selectee">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
And so on.