I have a navigation that's a unordered list, here's the simple structure I'm following / have to follow for my jQuery plugin to work correctly, therefore making this code structure a necessity:
<nav id="mp-menu" class="mp-menu">
<div class="mp-level">
<ul id="demo1" class="nav">
<li>
Devices
<div class="mp-level">
<h2>Devices</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>Mobile Phones</li>
<li>Televisions</li>
<li>Cameras</li>
</ul>
</div>
</li>
<li>
Magazines
<div class="mp-level">
<h2>Magazines</h2>
<a class="mp-back" href="#">back</a>
<ul>
<li>National Geographic</li>
<li>Scientific American</li>
</ul>
</div>
</li>
...
</ul>
</div>
</nav>
I need to provide a fallback and I have selected another jQuery plugin that needs to use a different structure to the above. I need to remove the DIV's with classname .mp-level but still keeping all unordered lists including .mp-level child lists.
The result will just be unordered lists without headings and DIV'S. My code below is removing the correct elements but my issue is with re-inserting the child unordered lists (specifically level 2):
$( "#demo1 h2, .mp-back" ).remove();
$( ".mp-level ul li .mp-level" ).detach();
$( ".mp-level ul li" ).append('.mp-level ul li .mp-level ul');
Anyone got any advice how to re-insert child UL's after I have removed their parents?
you can do this
$("#mp-menu").find(".mp-level").each(function(i,n){//each ".mp-level"
$(n).parent().append($(n).children());//append children to parent
$(n).remove();//remove actual div
});
http://jsfiddle.net/WBWwG/
You can save the detached nodes (wrapped inside a jQuery object) by assigning them to a variable and then using that variable in the .append() call.
Something like this:
// this selector doesn't select anything from the example html, btw
var $mp_level = $( ".mp-level ul li .mp-level" ).detach();
$(".mp-level ul li").append($mp_level);
Related
I have a problem dealing with duplicate ID's. I'm also aware it's very bad practise to have elements with the same ID but in this case, I'll end up having to change a massive part of the application to change the ID's so they can be unique.
I am having a problem toggling classes on an element in jQuery. My structure is below:
<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
<ul>
<li id="wl-7050"> <!-- This is the single element version of the data group header as above -->
<div id="wlHeader-7050"></div>
</li>
<li id="wl-7051"></li>
<li id="wl-7052"></li>
<li id="wl-7053"></li>
</ul>
</div>
</li>
</ul>
What I'm needing is a function where if I click the first instance of ID wl-7050, the child elements receive a new class. Whereas, if I select the second (single) element with ID of wl-7050 then only that one element has the new classes added to it.
I've tried using jQuery along with it's :first & :eq(0) attributes but still no luck unfortunately.
I do have classes assigned to each li element and it's child elements but whenever I run $('#wl-7050:eq(0)'), it returns both and the parent wl-7050 element get's used also.
I am flexible with JavaScript and jQuery answers.
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
You can't have two wl-7050. Use classes. Then to work on "add new class on click" it's just hard code. If you need a help I can edit my answer. But is just coding. Html IDs is a concept
I've been there before: I've had to deal with applications that do weird things, where changing them to be "correct" causes more grief than just dealing with it and moving on. You know duplicate IDs are bad, I know duplicate IDs are bad; let's sort the problem. (Yes, they're bad. Yes, they shouldn't be there. Unfortunately, there they are.)
You can treat IDs just like any other attribute on an element: they're attributes, albeit special ones. Code like this will work to select all elements with the same ID: $('[id=wl-7050]').
Now, we need to bind a click event to them. We'll do the same thing as we always do:
var lis = $('[id=wl-7050]').click(function(e){
console.log(this);
});
Here's the trick, and it would happen even if these elements all had different IDs: when you're clicking in a child LI, that click event will bubble up to the parent. We'll need to shut off event propagation so we don't trigger our click event twice:
var lis = $('[id=wl-7050]').click(function(e){
e.stopPropagation();
console.log(this);
});
Now we're in business and can work to figure out which type of LI we're working with: top-level or child.
var lis = $('[id=wl-7050]').click(function(e){
e.stopPropagation();
if ($(this).children('li').length > 0) {
// Top-level LI
}
else {
// Child-level LI
}
});
That should get you where you need to be. Let's all agree to never speak of those duplicate IDs again.
If you can't change the IDs, you could try adding a different class name to both elements:
<ul>
<li id="wl-7050" class="wl-7050-main">
<span></span>
<div id="wlHeader-7050"></div>
<div id="wlBody-7050">
<ul>
<li id="wl-7050" class="wl-7050-single">
<div id="wlHeader-7050"></div>
</li>
<li id="wl-7051"></li>
<li id="wl-7052"></li>
<li id="wl-7053"></li>
</ul>
</div>
</li>
</ul>
Then you query with:
$("#wl-7050.wl-7050-main");
$("#wl-7050.wl-7050-single");
You don't need to add an id to each li that would make it overly complicated. Just use classes inside your items and call them this way:
$("#group li").on("click", function(){
alert($(this).data("id"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="wl-7050"> <!-- This acts as a main data group holder for the below li elements -->
<span></span>
<div id="header"></div>
<div id="body">
<ul id="group">
<li data-id="1"> <!-- This is the single element version of the data group header as above -->
<div class="wlHeader"></div>
</li>
<li data-id="2"> <!-- This is the single element version of the data group header as above -->
<div class="wlHeader"></div>
</li>
<li data-id="3"> <!-- This is the single element version of the data group header as above -->
<div class="wlHeader"></div>
</li>
</ul>
</div>
</li>
</ul>
<ul class="level1">
<li>
<span>category name</span>
<ul class="level2"></ul>
<ul class="level2"></ul>
<ul class="level2"></ul>
<ul class="level2"></ul>
<ul class="level2"></ul>
<li>
</ul>
I want selected ul that is with level2 class to move to top of the
ul.level1 li but it should be after ul.level1 li span.
Actually this is regarding move elements in bootstrap tree
http://jsfiddle.net/umutc1/eyf9q87c/
See this JSFiddle, think it's what you're after: JSFiddle
Essentially, you hook onto the event that triggers the move, find the thing you want to move, find where you want to move it to and use the .after() jq function to do the move.
HTH
$(function(){
$("ul.level2").click(function(e){
var clickedUL = $(e.target).closest("UL");
$("ul > li > span").after(clickedUL);
});
});
Well I was having a hard time to call a certain element.
What I was supposed to do is get the
li.parent.iced-tea span a element. But the problem is it also affects the LEVEL2 li span a tag.
<li class="level1-parent has-children level1 parent iced-tea open">
<span class="vertnav-cat"><span>iced tea</span></span>
<ul>
<li class="first level2-active level2 active iced-ceylon-gold">
<span class="vertnav-cat"><span>iced ceylon silver</span></span>
</li>
</ul>
</li>
So I was wondering, how to get the exact child without going to other element.
Here's the code that I'm calling.
$("#vertnav ul li.iced-tea span a")
Any solution for this stuff?
Use a child selector (>):
$("#vertnav ul li.iced-tea > span a")
In other words, only select span links that are direct children of li.iced-tea elements.
I have nested lists and I need to style every items. Normally I would do something like this:
$('#myList li').addClass('myClass');
However, because they are nested, I need to style just text, I suppose. How do I do this with jQuery? I thied this, but it did not work:
$('#myList li').text().addClass('myClass');
Here's HTML
<ul id="myList">
<li>
item 1
</li>
<li>
item 2
<ul>
<li>
asdasd
</li>
</ul>
</li>
</ul>
I NEED TO StYLE EVERY LIST ITEM
first level, direct child
$('#myList > li').addClass('myClass');
second level AND higher
$('#myList li li').addClass('myClass');
This subject is largely documented on jquery api selector page
Now your question has been edited : you need to style ALL list items :
CSS
li { /* will affect ALL list-items */}
Now you made it clearer :
Wrapping what's inside the LI element
$('li').wrapInner( "<span class='your-css-selector'></span>" );
Now you shown that you won't search more than a copy-paste solution :
Wrapping what's inside the LI element but not what resides in another inner-element
$('#myList li').each(function(){
$(this).contents().first().wrap("<span/>")
});
credit to user PLS copy-pasted from his comment.
You cannot just style text.
You can specifically style the nested list items by doing this:
$('ul#myList > li > ul > li').addClass('myClass');
This will add the myClass class to the item that has the text asdasd in your example
Just wrap your text in a span and apply class on them. When you apply class on li all of its contents gets impacted hence any descendants as well like nested ul under the li. Instead just wrap the texts in an element and apply class to them.
<ul id="myList">
<li>
<span>item 1</span>
</li>
<li>
<span>item 2</span>
<ul>
<li>
<span>asdasd</span>
</li>
</ul>
</li>
</ul>
and
$('#myList li > span').addClass("myClass");
With this you could just handle it using Css rule itself.
i am trying to remove parent tag,
but removing parent tag should not remove their child element.
The child should get attached previous tag
Below is the code:
<div class="mask">
<ul id="TickerT" class="news">
<ul class="tweet_list">
<li class="first odd">
<span class="tweet_time">about 8 minutes ago</a></span>
<span class="tweet_join"></span>
<span class="tweet_text">test test…</a></span></li>
</ul>
</ul>
</div>
</div>
There are at-least 5 <li> and now i want to delete <ul class="tweet_list">.
I have tried it with jQuery's replaceWith but no result.
Here's the code i have used from a site
var jj = $("ul.tweet_list").contents()$(".tweet_list").replaceWith(jj);
But this didn't worked.
What i wanted is i want to remove <ul class="tweet_list"> but not <li> of that <ul>.
Help appreciated, Thanks..
You can call the unwrap() method on your list item:
$("ul.tweet_list > li").unwrap();
This will remove the .tweet_list <ul> element and reparent the <li> element (and its siblings, if any) under the #TickerT <ul> element.
Just use the .unwrap() method:
$('.tweet_list').children().unwrap();
DEMO
var jj = $("ul.tweet_list").html()
$("ul.tweet_list").replaceWith(jj)
There is no content method on jquery. Try the html method.
You could save the .html() content and the parent ul of the list you want to delete into a variable and then add the .html() to the parent ul.