I have a unordered list like the one below:
<ul id="tabs">
<li>latest news</li>
<li class="active">latest posts</li>
<li>latest posts</li>
<li>latest posts</li>
</ul>
I can't find a jQuery selector that gets the next list item from the one whith the .active class, so if .active is the second one the jQuery selector will give me the third list item.
Thank's
In one step: jQuery('li.active + li');
See adjacent sibling selectors.
$('ul#tabs li.active').next();
Related
I have some dom like
.....
<ul>*
<li>
<ul>
Sone html here
</ul>
</li>
</ul>
.....
<ul>*
<li>
<ul>
<li>
<ul>
Some html here
</ul>
</li>
</ul>
</li>
</ul>
......
How can I find the first <ul> elements (marked by *) using jQuery?
I used something like
$('body ul:first-child')
but this returns only one element
You need to use immediate child selector to target elements that are immediate child of their parent:
$('body > ul')
I don't know why few person recomended to delete answer bnu right answer is
$('ul:not(ul ul)')
we need to exclude ul included in ul in this case we get ul only on top level (marked by *)
I have a menu of a list of article names list-A, and a corresponding list of articles content, list-B. Each list A and list B item pair share an identical value in their class eg. class="orderCntrl-6062347".
I want to be able to select an item from list A to bring the corresponding article from list B to the top of list B.
I know how to re-order the lists by using the following to bring a selected item to the top of a list:
$("li.orderIt").click(function() {
$(this).parent().prepend($(this));
});
This is what my code currently looks like:
<!-- List A selecting an item here should bring selected item and paired item in list B to the top of each of their lists -->
<ul class="list-A">
<li class="orderIt orderCntrl-6062347"><a>Item 1</a></li>
<li class="orderIt orderCntrl-6062348"><a>Item 2</a></li>
<li class="orderIt orderCntrl-6062349"><a>Item 3<a></li>
</ul>
<ul class="list-B">
<li class="orderCntrl-6062347"><h2 class="newsTitle">Item One</h2></li>
<li class="orderCntrl-6062348"><h2 class="newsTitle">Item Two</h2></li>
<li class="orderCntrl-6062349"><h2 class="newsTitle">Item Three</h2></li>
</ul>
<!-- Script to bring accompanying article to top of list on selecting side menu - currently only bring elements in List A to the top of their lists -->
<script>
$("li.orderIt").click(function() {
$(this).parent().prepend($(this));
});
</script>
Here's a link to how things will look, the green side menu is list-A (it may be above the page title on screens under 1300px).
How do I adjust the script to bring the corresponding list B item to the top as well?
Is this kind of what you are looking for?
https://jsfiddle.net/stevenkaspar/61oL0Lfm/
<ul class="list-A">
<li class="orderCntrl-6062347" data-news-target='#news1'><h2 class="newsTitle">Item One</h2></li>
...
<!-- List B -->
<ul class="list-B">
<li id='news1'>NEWS One</li>
<script>
$("[data-news-target]").click(function() {
$(this).parent().prepend($(this));
var target_element = $( $(this).data('newsTarget') );
target_element.parent().prepend( target_element );
});
</script>
You can use data-news-target to say what element it will move
Working JSFiddle Example
What you need to do is:
Get the unique name you want to use to match with the article element.
Use it to find the article element you want to move to the top.
Move the article element to the top.
Recommendations:
Set the unique name as an ID on the menu item. It'll be easier to get and cleaner (id's are supposed to be unique anyway).
Use .on("click", function() { ... }) rather than .click(function() { ... }) for the many reasons mentioned here.
Now, on click you need to find the id of this using this.id. Then you need to add a . to it and grab the element as an object using the symbols $(). Then prepend it in exactly the way you did before.
Example HTML:
<ul class="List-A">
<li class="orderIt" id="unique-name-1">Item 1</li>
<li class="orderIt" id="unique-name-2">Item 2</li>
<li class="orderIt" id="unique-name-3">Item 3</li>
</ul>
<ul class="List-B">
<li class="unique-name-1">Article 1</li>
<li class="unique-name-2">Article 2</li>
<li class="unique-name-3">Article 3</li>
</ul>
Example jQuery
$(".List-A").on("click", ".orderIt", function() {
$(this).parent().prepend($(this));
target_article = $('.' + this.id)
target_article.parent().prepend(target_article)
});
It could be simplified to:
$(".List-A").on("click", ".orderIt", function() {
$(this).parent().prepend($(this));
$('.' + this.id).parent().prepend($('.' + this.id));
});
but that's much less readable, which will make it more time-consuming to figure out what's going on 6 months later when you've forgotten what you did.
I was wondering if it was possible to get the index of a single <li> in a multilevel <ul>...
Let's say I have the following unordered list:
<ul>
<li>1</li>
<li>
2
<ul>
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
<li>3</li>
<li id="position">4</li>
</ul>
When I use $('#position').index(); It returns 3 (zero based, 4th element), but I want it to return 5; since it's the 6th <li> in the <ul>.
Any ideas on how to do this?
Thanks in advance!
By setting the context of the index to all the li's in the ul :
$('#position').index('ul li');
FIDDLE
or even the other way around:
$('ul li').index($('#position'));
or specific to this UL only:
$('#position').closest('ul').find('li').index($('#position'));
I inherited template with the menu in which categories and subcategories is in the same scope. Here is an example:
<ul class="menu">
<li class="cat" data-item-type="category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li class="cat" data-item-type="category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
<li class="cat" data-item-type="category"></li>
<li class="cat" data-item-type="category"></li>
<li data-item-type="sub-category"></li>
<li data-item-type="sub-category"></li>
</ul>
I cant change the structure of this, but can add extra attributes to it.
So my question is if it is possible to select all categories subcategories when clicking on one of subcategories. In general i need to select all li until first class="cat" or data-item-type="category" occurrence including it - category and all it's subs.
Update answer per OP's update:
$('li[data-item-type="sub-category"]').click(function() {
$(this)
.add( $(this).nextUntil('.cat') )
.add( $(this).prevUntil('.cat') )
.prev('.cat').addBack() //in jQuery < 1.8, replace addBack by andSelf
//do something
});
Demo
After some brainstorming in the comments, here's a shorter alternative:
$('li[data-item-type="sub-category"]').click(function() {
$(this).prevAll('.cat:first').nextUntil('.cat').addBack()//do something
});
Demo
So .prevAll('.cat:first') matches the first previous .cat, nextUntil('.cat') gets all its subcategories and addBack (or andSelf in older versions) adds the .cat element back to the set of matched elements.
In up-to-date jQuery versions, the .add() and .addBack() methods sort the matched elements in document order, hence both alternatives will have .cat as the first element in the set followed by the subcategories in document order.
Reference
add
addBack
first
nextUntil
prev
prevUntil
This will solve your problem according to your request (updated) for category and subs (not buggy)
$('li').click(function() {
var x = $(this).add($(this).nextUntil('.cat')).add($(this).not('.cat').prevUntil('.cat')).andSelf().add($(this).not('.cat').prevAll('.cat:first'));
});
for clicking on the subs or the cat and selecting the other subs around it with it's category too
Use jQuery .nextUntil
$('li.cat').on('click', function() {
$(this).nextUntil('.cat');
/* then write you logic here */
});
I need to get every element with a specific id, get the parent of the object, and set its ID.
How would I do this?
I have this code:
<li id="edge_top"> </li>
<!-- Menu Items Here -->
<li id="not_selected"><a id="selection_link" href="index.htm">Home</a></li>
<li id="not_selected"><a id="selection_link" href="page1.htm">Subitem 1</a></li>
<li id="not_selected"><a id="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li id="edge_bottom"> </li>
I need to find all the anchor elements with the id "selection_link", get the parent (the "list item" element [li]) and set its ID to "selected". How would I do this with jQuery? I'll be using the conditioning to determine if the li element will actually be allowed to get the new ID. (if the URL matches the href property of the anchor element).
HTML specification specifies that an ID should only be applied to 1 element. You can't have more then one element with the same ID.
In this case, it's better to use classes.
TO select by class:
$(".classname")...
EDIT: An example based on your code:
<li class="edge_top"> </li>
<!-- Menu Items Here -->
<li class="not_selected"><a class="selection_link" href="index.htm">Home</a></li>
<li class="not_selected"><a class="selection_link" href="page1.htm">Subitem 1</a></li>
<li class="not_selected"><a class="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li class="edge_bottom"> </li>
<script type="text/javascript">
$(document).ready(function(){
$(".selection_link").parent().removeClass("not_selected").addClass("selected")
});
</script>
You need to use classes for that. In HTML you not allowed to use ID's multiple times.
The id attribute should be unique across your XHTML document, so this question is not really valid.
Although this may work if you really insist:
$("[id=xx]")
$('li a').each(function(){
if ($(window).attr('location').href.match($(this).attr('href'))) {
//example with class
$(this).parent().addClass('selected');
// example with id
$(this).parent().attr('id', 'selected');
}
});