In the follow content I need to remove the mark-up tags <div class="sub"> and </div> but not it's content with jquery. This is to adapt the menu to a responsive layout.
<nav id="top">
<ul>
<li class="ti" id="snw"> <a class="mm" href="/snowdepth/">Weather</a>
<div class="sub">
<ul>
<li><h2>Snowline</h2></li>
<li>Nordliche Ostalpen</li>
</ul>
</div>
</li>
<li class="ti" id="blg"> <a class="mm" href="/live/">Weblog</a></li>
</ul>
</nav>
Try unwrap():
$('.sub').find('ul').unwrap();
Essentially, you are looking for all the child elements of .sub, and unwrapping them or removing their parent.
Here's the demo: http://jsfiddle.net/yEseX/
You can do it this way.
Live Demo
$('.sub').parent().html($('.sub').html());
Supposing you may have more than one div with class sub, I'd suggest this :
var container = $('#top');
container.html(
container.html().split('<div class="sub">').join('').split('</div>').join('')
);
Try this,
var content = $(".sub").html(); // stored ".sub" div content
$(".sub").remove(); // remove ".sub" div
$("#top #snw").after(content); // insert content where you want
Try this:
var list = $('#snw');
var html = list.html();
list.html(html.replace('<div class="sub">','').replace('</div>',''));
Demo here
I think #Abhilash's answer is the neatest so far, but I would modify the selector slightly:
$('.sub').contents().unwrap();
This removes all of the .sub elements, leaving their contents in place.
JsFiddle: http://jsfiddle.net/yEseX/2/
Related
Here is my HTML?
<ul>
<li>
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
And this is my jQuery code:
$('li').on('click', function(){
var link = $(this).find('a').attr('href');
})
As you see, there is two <a> tags. And .find() refersh to both of them. While I just want to select the <a> which is right inside (one level) in the <li> tag. So expected result is ./link.
What alternative should I use instead of .find() ?
You can use the direct descendant selector.
$('li').on('click', function(){ var link = $(this).find('> a').attr('href'); })
Try with eq(0) .It will get the first a tag
Or
Do with first('a')
$(this).children().first('a').attr('href')
$('li').click(function(){
console.log($(this).children('a').eq(0).attr('href'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>click
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
Method 1: Using Jquery's children and first
$('#myList').on('click', function() {
var link = $('#myList').children('a').first();
console.log(link.attr('href'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
Method 2: Using the immediate children selector >
$('#myList').on('click', function() {
var link = $('li > a:first');
console.log(link.attr("href"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul>
<li id="myList">
<a href="./link1">
<div>something</div>
<span>link</span>
</a>
</li>
</ul>
the first specific element
What alternative should I use instead of .find() ?
$(this).find('a:first')
seems like only logical solution and easy to read by developer
Don't do so. How is the browser meant to know which link to follow? It'd be invalid HTML
I suggest you using this instead:
startmiddleend
As you can see start and end are linked to page1 but the middle points to page2.
I want to move some span elements to closest div. I found the solution to my problem but it does not work for me. I have some Html code:
<ul>
<li>
<a><span>Some info</span></a>
</li>
<div class="cl1">...</div>
<li>
<a><span>Some info 2</span><a>
</li>
<div class="cl1">
...
</div>
...
</ul>
and to move <span> like this:
$('span').each(function () {
$(this).parent().parent().closest('.cl1').append(this);
})
but nothing happened. Any help would certainly be appreciated
you can't put a div in a ul, only li's.
your html has to be valid (a's, ul need to be closed)
Closest searches anscetors, not siblings.
since your markup is not valid as is, i'm not sure if you want the divs in the list or not. This example removes them from the lis, which breaks the list into two lists.
$('button').click(function() {
$('span').each(function() {
var $div = $(this).closest('ul').siblings('.cl1');
$(this).clone().appendTo($div);
$(this).remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a><span>Some info</span></a>
</li>
</ul>
<div class="cl1">...</div>
<ul>
<li>
<a><span>Some info 2</span></a>
</li>
</ul>
<div class="cl1">...</div>
<button>Do Stuff</button>
I would like to filter <div> children from this list item to not get selected, only the entire <li>.
The HTML structure would be like:
<ul id="selectable">
<li>
<div id="1"></div>
<div id="2"></div>
</li>
<li>
<div id="1"></div>
<div id="2"></div>
</li>
...
</ul>
The jQuery would be:
var foo = $('#selectable').selectable({
filter: " > div"
});
But it's not working, happens that... if I don't put any filtering, I would be selecing the <div>s inside it, specially the <div> with the id=2 which is out the container gets selected, and it's awful! Here’s a screenshot so you can understand what I'm saying:
See the "About" text being selected too? How can I fix this?
Try this,
var foo = $('#selectable').selectable({
filter: " li " // li in place of div
});
I needed to filter by "li" in the selectable.
I have this kind of setup in my html
<section class="grp">
<ul class="normal">
<li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
</ul>
<ul class="advanced">
<li>This is Advanced</li>
</ul>
</section>
<h1>Another Thing</h1>
<section class="grp">
<ul class="normal">
<li>Normal Thing <button class="toggle-advanced">toggle advanced</button></li>
</ul>
<ul class="advanced">
<li>This is Advanced</li>
</ul>
</section>
How can I toggle the "advanced" ul if I clicked the button in ul.normal?
I tried it like this in coffeescript
$('.normal').on 'click', '.toggle-advanced', (e) ->
$(#).closest('.grp').siblings('.advanced').slideToggle();
since jquery is tagged... using jquery
$('.toggle-advanced').click(function(){
$(this).parents('ul.normal').siblings('ul.advanced').toggle();
});
or
$('.toggle-advanced').click(function(){
$(this).parents('.grp').find('ul.advanced').toggle();
});
these should work unless you aree adding the content dynamically.. use on() if added dynamically
$('.normal').on('click', '.toggle-advanced', function(){
$(this).parents('.grp').find('ul.advanced').toggle();
});
.advanced is not a sibling of .grp element, it is the sibling of the parent .normal element
$(#).closest('.normal').siblings('.advanced').slideToggle();
The javascript equal will be
$('.normal').on('click', '.toggle-advanced', function(){
$(this).closest('.normal').siblings('.advanced').slideToggle();
})
you can try this
$(".toggle-advanced").on('click', function(){
$(this).closest(".normal").siblings('.advanced').slideToggle();
});
this code is jquery based
In Jquery, you can use parent and siblings functions to get to the desired element.
Try this:
$('.toggle-advanced').click(function() {
$('this').parent().siblings().toggleSomething()
});
siblings returns all the siblings for given element, which in your case will always return "advanced" ul.
This should work.
$("ul.normal>li>button").click(function () {
$(this).closest('.normal').siblings('.advanced').slideToggle();
});
Working example: http://jsfiddle.net/riri78/dQcFE/
I see this question asked a lot in the related questions, but my need seems very simple compared to those examples, and sadly I'm just still too new at js to know what to remove...so at the risk of being THAT GUY, I'm going to ask my question...
I'm trying to switch out the div contents in a box depending on the button pushed. Right now I have it working using the animatedcollapse.toggle function, but it doesn't look very good. I want to replace it with a basic fade in on click and fade in new content on next button.
Basic idea:
<div>
<ul>
<li><a href="this will fade in the first_div"></li>
<li><a href="this will fade in the second_div"></li>
<li><a href="this will fade in the third_div"></li>
</ul>
<div class="first_container">
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
<div class="second_container">
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
<div class="third_container">
<ul>
<li>stuff</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
</div>
I've got everything working with the animated collapse, but it's just an ugly effect for this situation, so I want to change it out.
Thanks!
Joel
Joel, I think I understood what you wanted. Does this look right? In the code below I also used a convention where you append js to the class attribute on HTML so you can style your JS bits differently. If JS were disabled, all three tabs would show down in order. However, as long as JS is enabled, your code will display as desired.
You could improve this by dynamically setting the height of the #animators div based on the tallest height of the children, but it was getting complex enough as it was!
I changed your HTML a bit (both for testing and functionality.):
<div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div id="animators">
<div class="container">
<ul>
<li>stuff1</li>
<li>stuff1</li>
<li>stuff1</li>
</ul>
</div>
<div class="container">
<ul>
<li>stuff2</li>
<li>stuff2</li>
<li>stuff2</li>
</ul>
</div>
<div class="container">
<ul>
<li>stuff3</li>
<li>stuff3</li>
<li>stuff3</li>
</ul>
</div>
</div>
</div>
Add this to your CSS:
.js #animators { position: relative; height: 100px}
.js #animators div.container { position: absolute; left: 0; top: 0 }
And use this JavaScript:
<script type="text/javascript">
document.documentElement.className += " js"; // Add js class to the HTML element
$(function(){
var $containers = $("#animators > div").hide();
$('ul li a').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
// Fade out visible div
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut();
}
// Fade in new div if not already showing
$target.not(':visible').fadeIn();
e.preventDefault();
})
})
});
</script>
EDIT Here is an alternate JavaScript block that fadesOut then fadesIn:
<script type="text/javascript">
document.documentElement.className += " js"; // Add js class to the HTML element
$(function(){
var $containers = $("#animators > div").hide();
$('ul li a').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
// Fade out visible div
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut(1000, function(){
$target.not(':visible').fadeIn(1000);
});
} else {
$target.not(':visible').fadeIn(1000);
}
e.preventDefault();
})
})
});
</script>
Looks like toggle supports a speed setting...maybe that would be more elegant?
How about a JQuery fade out - http://docs.jquery.com/Effects/fadeOut and then your callback is a fade in?
..I just saw your link in the comments, that is exactly what they are doing on CSS tricks. Do you have a more specific question?
UPDATE
The visible class refers to the div that will be visible...haven't tested this but it should be about right
$('.first_container').click(function(){
$('.visible').fadeOut(3000,function(){
this.removeClass('visible');
$('.first_container').addClass('visible');
$('.first_container').fadeIn(3000);
});
})
That is the code to reference your first_container....you can go from there
If i've understood your question properly, this may be helpful for you
<div id="LoadMe2"><h3>Please select what to edit!</h3></div>
<script>
$('a').click(function() {
$('#LoadMe2').load($(this).attr('href'));
return false;
});
</script>
and html can be like
<input type="button" value="edit Header menu">
EDIT
sorry this helps you to fetch the content from those pages and displays it.
keeping this post as someone else may need this