We Keep Coding

How to use an element's attribute value to target another element with an identical attribute value in jQuery?

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.

Link 'active' state on two separate HTML elements

I'm trying to mirror the 'active' state on two unordered lists using jquery/javascript. The first list is a slider/carousel and the 2nd list will be navigation links.
E.g.
<ul class="carousel">
<li class="active">Slider 1</li>
<li>Slider 2</li>
<li>Slider 3</li>
<li>Slider 4</li>
</ul>
<ul class="nav">
<li class="active"><a href'#">Link 1</a></li>
<li><a href'#">Link 2</a></li>
<li><a href'#">Link 3</a></li>
<li><a href'#">Link 4</a></li>
</ul>
So, the idea is that when the active state of the <li> in the carousel changes, so does the corresponding <li> in the 'nav' list.
Any help would be greatly appreciated.

I've created a working example here: https://jsfiddle.net/aj68mogk/14/
It was not working for you on JSFiddle because the script does not change the carousels .active class, thats done by the wp plugin.
I've put in a link to "fake" the action the plugin does (changing the carousel state).
There was a mistake in the part of code wich gets the index of the active carousel li.
So please ignore the code of my first answer and take the one of the JSFiddle. But dont forget to remove the fake link and its click function when using this on your page
Next thing is you have to select a Jquery version on JSFiddle, otherwise the $(document).ready() function is never entered, because its not pure js.
Hope this helps, if there are questions left, just leave a comment

I worked something out from several SO posts:
$(document).ready(function() {
$('.carousel').bind('DOMSubtreeModified', function(e) {
$(".nav>li.active").removeClass("active");
$(".nav>li").eq($(".carousel").index($("active"))).addClass("active");
});
});
Just add this to your Javascript and its done.
What it does: First you bind any DOM-Changes (you've said it's changed by a wp plugin or so) in the .carousel element to a new function. Inside the function you remove the active li tag, then you pick the index of the active carousel element and add the .active tag to the nav element with the index from the .carousel
Hope this helps
EDIT: There was a mistake in the code, some unneccesary line i kept in from testing. Please take the updated code

If you don't have access to the code of Wordpress plugin you have no direct way to do it , but can use a setTimeOut function. This is not the cleanest of the approaches , but I guess there is no other option.
setInterval(function() {
if ($(".carousel li").hasClass("active")) {
var active = $(".carousel").find(".active");
var index = $(active).index();
index = index + 1;
$(".nav li:nth-child(" + index + ")").addClass("active");
}
}, 1000);
.active {
color: red;
}
.active a {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="carousel">
<li class="">Slider 1</li>
<li class="active">Slider 2</li>
<li>Slider 3</li>
<li>Slider 4</li>
</ul>
<ul class="nav">
<li class="">
Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>

Check element with class of active and slide down the next element beneath it

I want to check if the element with the class nav-title also has an active class, if true, slide down the next element (which has a class of .sub-nav) beneath the element with the nav-title class.
Otherwise if no element with the class of nav-title has an active class, find the first element with a class of .sub-nav, show it, go up, add the class of active to the .nav-title
The next code with the on-click functions works just fint, it's just the first one that doesn't.. i've tried to add the class active in the html document itself, but then both the first element and the second gets the class active and no sub nav gets slide down.
$(document).ready(function() {
if ($("#nav").find("nav-title").hasClass("active")) {
$(this).next(".sub-nav").slideDown("fast");
} else {
$("#nav").find(".sub-nav:first").show().prev().addClass("active");
}
$("#nav").on("click", ".nav-title", function() {
$('.active').removeClass("active").next(".sub-nav").stop().slideUp("fast");
$(this).toggleClass("active");
$(this).next(".sub-nav").stop().slideDown("fast");
});
});
Can anybody help?
Also my html looks like this by the way:
<ul id="nav">
<li class="nav-title">Title 1</li>
<ul class="sub-nav">
<li>link 1</li>
<li>link 2</li>
</ul>
<li class="nav-title active">Title 2</li>
<ul class="sub-nav">
<li>link 1</li>
<li>link 2</li>
</ul>
</ul>
My code might be a little messy, i'm just learning jquery as we speak.
Wooops! I made a little live example: http://fiddle.jshell.net/kcWA8/2/

You can't use this in this context the way that you think you can. this inside of the if is not the nav. You're also mising the . before nav-title in your find. Do this instead:
if ($("#nav").find(".nav-title").hasClass("active")) {
$("#nav .nav-title.active").next(".sub-nav").slideDown("fast");
}
Or:
var $active = $("#nav .nav-title.active");
if ($active.length > 0) {
$active.next(".sub-nav").slideDown("fast");
}

I used James Montagne's answer, it worked just fine, looks like I misunderstand this (this) and forgot a dot in front of my class.
Thanks!

Toggling list, clicking on item shows all subitems instead of only subitems from item

Sorry for the vague title, but I couldn't find an appropriate title, explaining the problem well.
The problem: I wrote a code that toggles lists. It works the way I want it. When I click on the the 'headcategory' it opens the subcategories, etc. The problem occurs when I click on the headcategory for the first time, it opens every list, which is not what I want. When I close and open it again, it works the way it should be. I'm trying to figure out why it does that, but I've no clue. So if someone could help me, he/she would be greatly appreciated.
JQuery code.
$(document).ready(function()
{
$('ul.subcat').hide();
$('li').click(function(event)
{
event.stopPropagation();
$('ul', this).toggle();
});
});
HTML code
<ul class="headcat">
<li>item 1
<ul class="subcat">
<li>subitem 1
<ul class="subcat">
<li>subsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubitem 2
<ul class="subcat">
<li><p>text</p></li>
<li>subsubsubitem 1
<ul class="subcat">
<li><p>text</p></li>
</ul>
</li>
<li>subsubsubitem 2</li>
</ul>
</li>
</ul>
</li>
<li>item 2</li>
</ul>
</li>
</ul>

You need to only select direct descendants of the currently clicked li, try this:
$(this).children("ul").toggle();
The following will also work, however it's not considered best practice to use the > descendant selector without a primary element before it.
$('> ul', this).toggle();
Example fiddle

Or try to hide the first subcat only on init:
$('ul.subcat:first').hide();
DEMO here: http://jsfiddle.net/kv4dT/

Jquery list within a list menu

So I would like to build a unsorted list and and another unsorted list within it so there is a basic menu functionality.
I basically need to know how to have Jquery access the elements so when a main level item is clicked, its children show.
So for example:
<ul class="category-links">
<li>
<span>Category 1</span>
<ul class="sub-category-links">
<li>Sub-category 1</li>
<li>Sub-category 2</li>
<li>Sub-category 3</li>
</ul>
</li>
</ul>
I might have several of these. Essentially I set the subcategories to display:none and I want Jquery to allow for when I click on the "category-links", only its children are displayed.
Thanks!

You can do something like this:
$('.category-links li').click(function(){
$(this).find('.sub-category-links').show();
});