Combine cloned UL menus - javascript

I am cloning UL's from one element to another like so.
$( "#mobMenu li a" ).each(function(index) {
var subID = $(this).attr('id')
if (typeof(subID) !== "undefined") {
subID = "#sub_" + subID + " .subnav-menu"
var subMenu = $(subID).clone();
$(this).parent().append(subMenu);
}
});
Menu I am cloning:
<div id="sub_cat3">
<ul id="sub_cat" class="subnav-menu">
<li>..</li>
</ul>
<ul class="subnav-menu">
<li>..</li>
</ul>
</div>
Into a new mobile menu that looks like this:
<ul id="mobMenu">
<li><a id="cat3"></a>
// cloned menu to go here
</li>
</ul>
So ho can I combine each cloned ul into one UL?
<ul class="subnav-menu">
<li>..</li>
<li>..</li>
</ul>

I think you want something like this (had to contrive the HTML as a suitable example was not provided):
JSFiddle: http://jsfiddle.net/TrueBlueAussie/b10n5mf0/1/
or with your new HTML: http://jsfiddle.net/TrueBlueAussie/b10n5mf0/4/
$("#mobMenu li a").each(function (index) {
var subID = $(this).attr('id')
console.log(subID);
if (subID) {
subID = "#sub_" + subID + " .subnav-menu li"
var $div = $('<ul>').append($(subID).clone());
$(this).closest('li').append($div);
}
});
Notes:
It creates a single UL for each matching set of lists' LIs.
Only the matching LIs are cloned, then inserted under the created UL with append.
if (typeof(subID) !== "undefined") can be replaced with if (subID) as attr returns a string or undefined (and empty strings are treated as undefined by your code).

You can do...
var $subs = $('.subnav-menu'),
$lis = $subs.find('> li').clone();
// Add all the $lis to the first subnav...
$subs.eq(0).append($lis);
// Remove the rest of the subs...
$subs.slice(1).remove();
Here is a small demo: http://jsbin.com/jerapo/2/edit?js,output

Related

Filter list items after storing in variable

I am trying to store some list item into a variable and then loop through the variable and display only the list items that have a certain data attribute. It is worth mentioning that just using a simple show/hide on the li's on the page will not work for what I'm doing. https://jsfiddle.net/0jbnLv0k/
HTML:
<ul>
<li data-color="blue"></li>
<li data-color="red"></li>
<li data-color="green"></li>
<li data-color="blue"></li>
<li data-color="red"></li>
<li data-color="green"></li>
</ul>
<button class="blue">blue</button>
<button class="red">red</button>
<button class="yellow">yellow</button>
Jquery:
var items = $('ul li');
items.remove();
var result = $.grep(items, function(e){ return e.data == 'blue'; });
$('ul').html('<li>' + result + '</li>');
Problem is that
typeof e.data === 'undefined'
Solution is this:
var items = $('ul li');
items.remove();
var result = $.grep(items, function(e){
return $(e).attr('data-color') == 'blue';
});
$('ul').append( result );
But this is very bad end expensive ( time consuming ) way to display DOM elements. Much better would be add class with
display: none;
property.
Instead all this code you can use only one line:
$("li:not([data-color='blue'])").addClass('hide')
$("button").click(function() {
var getClass = $(this).attr("class");
$("ul").find("li").not("li[data-color="+getClass+"]").remove();
});
you could use not selector removing all list elements except the selected class.
https://jsfiddle.net/0jbnLv0k/5/

Search and returned li element in JQuery

I have a ul of class items . The ul has li each of class item and different id example id1 id2 id3. We have a jquery code that select each item like below and perform action based on the selected or clicked linked.
$("#main-menu .items a").each(function () {
var url = new URL($(this).attr('href'));
if(url.is_in(that.page_url)) {
item = $(this).closest('.item');
}
});
Example like
<ul class="items">
<li id="id1" class="item"></li>
<li id="id2" class="item"></li>
<li>....</li>
My question is what would the item from the jquery code above return? My pages are separated by language, let say i want to set a value for item in the jquery code based on my language, how would i do that and what should my item look like? I tried below.
$("#main-menu .items a").each(function () {
var url = new URL($(this).attr('href'));
if(url.is_in(that.page_url) && page.language() === 'EN' && /\/text/.test(page.url)) {
item = "http://example.com/id2";
}
else{
if(url.is_in(that.page_url)) {
item = $(this).closest('.item');
}
}
});
Please where do i go wrong ? Any help would be appreciated.

Parsing XML attribute with JQuery, keeps writing same attribute over and over instead of all of them

I'm trying to build two unordered lists through an AJAX call, referencing multiple member groups in an XML, and then writing to HTML via JQuery. Each member group has an tag with a number that I'm adding as an attribute to the HTML that's being rendered. My problem is that it keeps repeating the last member group tag in each LI that's being written instead of all of them in order.
I need the LI's to look like this:
<li id="1">description 1</li>
<li id="2">description 2</li>
<li id="3">description 3</li>
<li id="4">description 4</li>
instead they're looking like this:
<li id="4">description 1</li>
<li id="4">description 2</li>
<li id="4">description 3</li>
<li id="4">description 4</li>
The bulk of it can be found here:
http://jsfiddle.net/p9heB/
//THE PROBLEM HAS TO BE IN THIS PART RIGHT?
$(this).find("id").each(function(){
var id = $(this).text();
$('.thumbnails ul li a').attr('id', id);
$('.bio ul li').attr('id', id);
});
It should be
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://chunchmeow.com/users.xml",
cache: false,
dataType: "xml",
success: function (xml) {
var $bio = $('.bio > ul');
var $thumbnails = $('.thumbnails > ul');
$(xml).find('member').each(function () {
var $this = $(this),
id = $this.find('id').html();
$('<li />', {
id: 'bio-' + id,
html: $this.find('bio').html()
}).appendTo($bio);
$('<li />', {
id: 'thumb-' + id,
html: '' + $this.find('photo').html() + ''
}).appendTo($thumbnails);
});
}
});
});
When you are setting the id at the end of the member loop instead of targeting a specific li you are targeting all li elements under bio and thumbnails.
Note: You are creating multiple elements with the same id, it is not valid as ID of an element must be unique in a page - add a prefix like bio- and thumb- for the bio and thumbnails ids respectively.
Demo: Fiddle
The problem is that you are using a selector to find the list elements where you want to put the id. You will be setting each id on every list element that exists at that time. When you are at the last item, it will overwrite the id of all previous items.
Keep a reference to the list items that you create:
var bioItem = $('<li>' + bio + '</li>').appendTo( ".bio > ul" );
and:
var photoItem = $('<li>' + photo + '</li>').appendTo( ".thumbnails > ul" );
then use the references to set the id on those specific elements:
bioItem.attr('id', id);
photoItem.attr('id', id);
However, the id of an element should be unique in the page, so setting the same id on two elements is not advisable.
Also, using a numeric id can be problematic, you might want to add a prefix to the number, for example:
bioItem.attr('id', 'bio' + id);
photoItem.attr('id', 'photo' + id);

change class name with js

I have menu list that contains:
<ul class="content_menu tabs">
<li class="pager_link_0_active"></li>
<li class="pager_link_1"></li>
<li class="pager_link_2"></li>
<li class="pager_link_3"></li>
<li class="pager_link_4"></li>
<li class="pager_link_5"></li>
<li class="pager_link_6"></li>
<li class="pager_link_7"></li>
<li class="pager_link_8"></li>
</ul>
What I want to do is when particular link is clicked I need to remove active from li class name that contains active (e.g pager_link_0_active) and add active to the li that is clicked (e.g pager_link_2_active)
I know there is one way to make it:
$(".active").removeClass("active");
$(this).addClass("active");
but in my situation, active is not seperated, it is part of class name.
According to standards ul can contain only element but what you want can be achived these way:
$(function () {
$('ul.content_menu.tabs a.tab').click(function () {
var newActive = $(this);
if (newActive.hasClass('active')) {
return;
}
var oldActive = $('ul.content_menu.tabs a.tab.active');
oldActive.removeClass('active');
var oldIndex = $('ul.content_menu.tabs a.tab').index(oldActive);
oldActive.children().attr('class', 'pager_link_' + oldIndex);
var newIndex = $('ul.content_menu.tabs a.tab').index(newActive);
newActive.addClass('active');
newActive.children().attr('class', 'pager_link_' + newIndex + '_active');
});
});
Here is fiddle
It would be better to make it a separate class <li class="pager_link_1 pager_active">, then you can remove and add pager_active easily.
If the LI will always have just one class, try this:
var active_li = $(".active li");
var active_class = active_li.attr("class");
active_li.attr("class", active_attr.replace("_active", "");
var this_li = $(this).children("li");
var this_class = this_li.attr("class");
this_li.attr("class", this_class+"_active");

jQuery cant access element with its attr href // simple tabs structure

I can't access "a" element with its href. Like this example, i need add class to element which got href="#one"
Here is jsFiddle.
jQuery:
//tabs part is working fine
$('.tabs').hide();
$('.tabs:first').show();
$('ul li a').click(function(){
var target = $(this).attr('href');
$('.tabs').hide();
$(target).fadeIn(500);
$('ul li a').removeClass('selected');
$(this).addClass('selected');
});
//problem starts when i try to reach href
var link1 = '#one';
var link2 = '#two';
var link3 = '#three';
var takE = $('ul li a').each();
var finD = take.attr('href');
finD.addClass('thisisLink1');​
html:
<ul>
<li>Home</li>
<li>Posts</li>
<li>About</li>
</ul>
<div class="tabs" id="one">Home Container</div>
<div class="tabs" id="two">Posts Container</div>
<div class="tabs" id="three">About Container</div>​
I have tried each method but it didn't work. I need to access elements with their attr href and set the object to addClass or animate. This way returns me as a string.
Use attribute selector like so:
$('a[href="#one"]').addClass(...)
Also note that you defined a takE variable and the you wrote take: probably you may want to write
var takE = $('ul li'),
finD = takE.find('a[href="#one"]');
finD.addClass('thisisLink1');
$('ul li a').each(function() {
if(this.href == link1) $(this).addClass('thisisLink1');
if(this.href == link2) $(this).addClass('thisisLink2');
if(this.href == link3) $(this).addClass('thisisLink3');
});
You can also use an object mapping:
var links = {
'#one': 'thisislink1',
'#two': 'thisislink2',
'#three': 'thisislink3',
};
$.each(links, function(key, val) {
$('ul li a[href="' + key + '"]').addClass(val);
});
DEMO

Categories