We Keep Coding

Wrap a tag around href inside a div

In the HTML code there is a 'href' , is there any posiblity to wrap an A-tag() around it? I'm new to this so please don't be too harsh :)
Note that the jquery is there to find the 'href' of a child inside the div and setting that attritbute to .summary-item-wrapper
HTML:
<div class="summary-item-wrapper" href="www.google.no" id="yui_3_17_2_4_1483527702805_1738"><div>
Jquery:
$(document).ready(function(){
$('body').wrapInner('<div id="support"></div>');
$('#support .sqs-block-summary-v2 .summary-item').each(function () {
var linkto = $(this).find('.summary-title a').attr('href');
$(this).children('.summary-item-wrapper').attr('href', linkto);
});
});

If there are multiple divs on your page you wish to convert, and to remove divs, but to keep all attributes, you can do something like this:
$( "div.summary-item-wrapper" ).each(function() {
$(this).before('<a href=http://'+$(this).attr('href') +'>A link');
$(this).prev().attr('id',$(this).attr('id'));
$(this).prev().addClass($(this).attr('class'));
});
$('div.summary-item-wrapper').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summary-item-wrapper" href="www.google.no" id="yui_3_17_2_4_1483527702805_1738">44444444444</div>
<div class="summary-item-wrapper" href="www.google.com" id="yui_3_17_2_4_1483527702805_33333">ttttttttttt</div>

What you want can be done with this:
$('#support .sqs-block-summary-v2 .summary-item-wrapper').wrap(function () {
return '';
});
Also href="google.no" means go to <currentdomain>/google.no, in case you need the google.no use href="https://google.no"
Check JSFiddle.
Please consider the comments on your question too.

jQuery make a series of div tags into an unordered list

I have a series of div tags as follows:
<div>
<div class="MB_SLOT" id="slot1"></div>
<div class="MB_SLOT" id="slot2"></div>
<div class="MB_SLOT" id="slot3"></div>
<div class="MB_SLOT" id="slot4"></div>
</div>
I want to put the MB_SLOT elements into an unordered list (ul) but everything (including the containing div) has been generated by an API that I have no control over and the number of generated elements can vary from page to page.
If I use j$( ".MB_SLOT" ).wrap( "<li></li>" ); I can wrap each of the MB_SLOT elements but I don't know how to then wrap that in <ul></ul>
Can anyone advise on the best method to achieve this?

Give your li's a class for more specificity
$( ".MB_SLOT" ).wrap( "<li class='list-item'></li>" );
Then use .wrapAll() to wrap all instances of "list-item"
$( ".list-item" ).wrapAll( "<ul></ul>" );
Working fiddle

Is the parent always the same, a <div> element?
If so, you could use:
var parent = $( ".MB_SLOT:first").parents("div"), // find parent <div>
ul = $("<ul></ul>"); // setup <ul> element
parent.prepend( ul ); // add <ul> element as first child in parent
$( ".MB_SLOT" ).appendTo( ul ); // move .MB_SLOT as children of <ul>
$( ".MB_SLOT" ).wrap( "<li></li>" ); // wrap .MB_SLOT in <li>
https://jsfiddle.net/opzLLx9h/

you could do something like this (rebuild the divs into lis) https://jsfiddle.net/rwghggx4/2/
i could be mistaken, but the reason why this example "builds" an li instead of just wrapping the div in an li is because you're not supposed to put divs in lis.
$(document).ready(function() {
function transformToUL() {
var html = "<ul>";
$('.MB_SLOT').each(function() {
console.log($(this));
html += "<li class='MB_SLOT' id='" + $(this).attr('id') + "'>" + $(this).text() + "</li>";
});
$('.container').append(html);
$('.changeToUL').hide();
}
transformToUL();
});

Apply the class "active" to nav links when clicked?

My website is a parallax one page scrolling website, so all my nav links are directed to ids nested within that page...
For example:
<ul class="clearfix">
<li>Home</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
So How would I tell my html that when someone clicks on one of these links and directs them to the corresponding ID on the page, to take on the class active? And the link that was active to turn back to the regular styling?

Assuming your link elements are contained in an element with class nav, and you're using jQuery, you could do the following:
$('.nav a').on('click', function(event) {
$('.nav a.active').removeClass('active');
$(this).addClass('active');
});
fiddle

You will have to use JavaScript to add that functionality into your application. Everytime a link is clicked, add the 'active' class to the triggering element, and remove it from all others. This is straightforward if you can use jQuery (jsFiddle with jQuery), and only a little more tedious otherwise.
$(function() {
$("ul.clearfix > li > a").click(function() {
$("a.active").removeClass("active");
$(this).addClass("active");
});
});
If you're only using native JS, you can try something along the lines of the below (jsFiddle using vanilla JS):
var links = document.getElementsByTagName("a"); // more specific selector if other links
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.onclick = function () {
var prev = document.getElementsByClassName("active");
if (prev && prev[0]) {
prev[0].className = ""; // if using other classes, filter better
}
this.className += " active";
};
}
This second solution needs to be adapted to fit your particular application/DOM structure, since it's not quite as flexible as the first.

jQuery
$('ul a').on('click', function(event) {
$('a').removeClass("active");
$(this).addClass("active");
});
Replace ul a with something more specific like .nav a

Hiding an unordered list when it has no elements

I have a problem that seems at first like a total no-brainer and an easy task.
I have a JavaScript plugin on my page that generates a Table Of Contents list to the sidebar of my Wordpress pages. My purpose is to hide the text widget element of the #toc when the list within it has no elements. I'm trying to solve it using jQuery but no luck.
The HTML:
<div class="textwidget">
<div id="toc">
<ul></ul>
</div>
</div>
The JavaScript:
jQuery(document).ready(function ($) {
if (!$('#toc').children('ul').has('li')) {
$('#toc').parent().hide();
}
});
My script should hide this specific #toc's parent, because it has no child <li> elements, but it doesn't. Instead, when I remove the ! from my if sentence, the script hides my list, as if it had something in it. It then also hides the lists that actually have elements in them. Am I totally missing something here?

Simply use this:
$(document).ready(function () {
if ($('#toc ul li').length < 1) {
$('#toc').parent().hide();
}
});

<script>
$(document).ready(function(){
$("#YourListID").hide();
var a = $("#YourListID li").length();
if (a > 0 ) {
$("#YourListID").show();
}
else {
$("#YourListID").hide();
}
});
</script>

You can try one of the following:
1) Give the UL an ID and check it's HTML. Ex:
var ulHtml = $("#myULElement").html();
if(ulHtml == ''){
$('#toc').parent.hide();
}
2) Do the same as above but with a relative path, like:
var ulHtml = $("#toc ul").html();
//etc...
See if that works. If it does, we can elaborate on it further.

This works:
if(!$('#toc').has('ul li').length) {
$('#toc').closest('.textwidget').hide();
}
Working jsfiddle here

What you need to do is add .length to your testing statement.
jQuery(document).ready(function ($) {
if (!$('#toc').children('ul').has('li').length) {
$('#toc').parent().hide();
}
});
Working Fiddle
Source: http://api.jquery.com/has/

Use length to evaluate if there are <li> or not.
DEMO
<div class="textwidget">
<div id="toc">
<ul></ul>
</div>
</div>
if ($('#toc ul li').length<1) {
$('#toc').parent().hide();
}

inside $(document).ready check for this
if($.trim($('#toc ul').html()).length == 0){
$('#toc').parent().hide();
}
as case may arise
<ul></ul>
<ul>
</ul>

Efficient jQuery navbar?

I'm trying to make a simple navigation bar in HTML/jQuery and have managed to make a working implementation. Each tab is supposed to, when clicked, display the appropriate content section. (NOTE: all 's are display = none by default. the "active" class sets this value to "block")
I've been doing a bit of reading about efficiency concerns with Javascript and jQuery and really want to start making it a good habit of writing efficient code from the beginning as opposed to always having to come back to everything.
Is there a more efficient way of doing what the code I have below does? I know that constant calls to the DOM can be expensive, but I'm not entirely sure if I can change that in this scenario.
Any advice regarding how this example could be better would be great. General performance tips for jQuery/Javascript would also be greatly appreciated!
index.html
<div id="container">
<nav>
Home
About
Careers
Contact
Lasers
</nav>
<section id="home" class="active">
This is the home section!
</section>
<section id="about">
This is the about section!
</section>
<section id="careers">
This is the careers section!
</section>
<section id="contact">
This is the contact section!
</section>
<section id="lasers">
This is the lasers section!
</section>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./app.js"></script>
app.js
$(document).ready(function() {
$('a').click(function() {
var view = $(this).data("content");
var curr = $("#"+view).attr("class");
if (curr !== "active") {
$(".active").toggleClass("active");
$("#"+view).toggleClass("active");
}
event.preventDefault();
})
});

What about
$(document).ready(function () {
//cache the sections
var $setions = $('#container > section');
$('a').click(function () {
var view = $(this).data("content");
//cache the target
var $view = $("#" + view);
//use hasClass to check whether the target is already active if so do nothing
if (!$view.hasClass('active')) {
//remove active class from other sections
$setions.filter(".active").removeClass("active");
//add active class to target
$view.addClass("active");
}
event.preventDefault();
})
});

I would do something like this:
var section = $("section");
$("nav a").on("click", function () {
section.removeClass("active");
$("#" + $(this).data("content")).addClass("active");
});
Less code + you're caching your sections.
Demo here:
http://jsfiddle.net/a75p8/

I think you're doing too much work with the data-content. How about something like this?
$(document).on('click','nav a',function(){
$('section').hide(); //or removeClass
var tmp_div = $(this).index(); // declaring a variable
$('nav a').eq(tmp_div).show(); // or addClass
});