I'm trying to take group of headers and lists, and contain them individually so I can style them. ie:
<h2>Title 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Title 2</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
I attempted this by using .before() and .after to add a div before the h2 tag, and close it after each ul however I found out that jquery cleans and closes the tag automatically. So I'm guessing I need to use wrap() just not sure how to group the title and list together.
Use
$('h2').each(function(){
var self = $(this);
self.add( self.next() ).wrapAll('<div/>');
});
demo at http://jsfiddle.net/gaby/e4f9h/
You want to create a jQuery collection that contains both elements. For this you would select the h2 elements. You than would need to find the next() element that is a ul. After you get both of them linked, you would wrapAll() with your containing div.
$("h2").each( function(){
var h2 = $(this);
h2.add(h2.next("ul")).wrapAll('<div class="madWrapper"></div>');
});
jsFiddle
Related
I have menu with items. I want to add to tag class with name "name". I try to use:
var element = document.getElementById('myElement');
element.classList.add('myClass');
But the tag doesn't have any ID or class.
It's even possible with Javascript?
<ul id="menu-main">
<li id="menu-item">
ODKAZ
</li>
</ul>
If you really want to add the class with javascript, you can do:
var element = document.getElementById('menu-item');
element.getElementsByTagName("a")[0].classList.add('js-target-scroll');
<ul id="menu-main">
<li id="menu-item">
ODKAZ
</li>
</ul>
But beware that the "onemenu" you are talking about is looking for this css-class and if your own script is not run before that, this won't work since the class is not yet added.
If it's your own theme you are developing, you can add the css-class server side with custom walker.
If you want to add the class for all menu item anchor tags, you can use the code below. If not, use what Esko has suggested in his answer and comments.
var menuItemLinks = document.querySelectorAll("#menu-main li a");
menuItemLinks.forEach(function(element) {
element.classList.add("myClass");
});
<ul id="menu-main">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
I am trying to create a menu formated by jQuery. The appearance and functionality of level one items is correct, but the subsquent levels are not correctly formatting as a submenu that appears with mouse over. Rather it simply appears, and does not highlight the items as the level one items do with mouse over or hover (neither function appears in my code).
HTML CODE
<div style="width: 25%">
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
jQuery or JavaScript
$(document).ready(function() {
$('#menu').menu({menus: "div"});
});
JS Fiddle
I figured it out. It is a matter of simply deleting in the JavaScript the following from line 6:
{menus: div}
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div id="info-1></div>
<div id="info-2></div>
And when you hover over one of the items a window is displayed with some info regarding the item. I have worked this out for one item, now I wanna know how I can make this work for the entire list.
My initial thought was to create one script per each item... but that seems a bit thick considering the functionality of js.
Javascript
$(function(){
$('pop il li').hover(function(){
$('#info-1').show();
},function(){
$('#info-1').hide();
});
});
Now I need the following. Once the "window" is displayed on hover, in I need the window to stay open in some way for me to be able to scroll through the content using my mouse. This is mainly because I have some links inside it and need to access them! Right now, As soon as i leave the li item, the window of course disappears... which is not fun. So, how can i solve it?
UPDATED
I would make one function to handle the action you want for these. Make sure the 'info' divs are in the same order as the 'pop' li's
Here is an example FIDDLE
<div id="pop">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</div>
<div class="info"></div>
<div class="info"></div>
<div class="info"></div>
Then use this jquery
$('#pop li').mouseover(function() {
$('.info').hide();
var x = $(this).index();
$('.info').eq(x).show();
});
$('.info').mouseout(function(){
$(this).hide();
});
im a css/designer guy so please excuse my lameness in not knowing any .js
basically i want to know how to add an auto incremental id to a list item with javascript / jquery for something that i am trying to add some css to.
before
<li id="">Item number 1</li>
<li id="">Item number 2</li>
<li id="">Item number 3</li>
after
<li id="1">Item number 1</li>
<li id="2">Item number 2</li>
<li id="3">Item number 3</li>
thanks in advance and especially just for reading this
tried all the responses, nothing has worked on a plain html page with nothing but the ul/li items.
thanks to all that tried, i have failed in a big way.....im not a coder
I'm going to give your li tags an encompassing ul with an id in case there are other li tags on the page that you don't want to order, but in jQuery this is pretty easy for:
<ul id="ordered">
<li>Item number 1</li>
<li>Item number 2</li>
<li>Item number 3</li>
</ul>
You would simply use the each method:
$('#ordered li').each(function(i,el){
el.id = i+1;
});
I would recommend using something other than just a plain integer for an id though, so maybe something like 'ordered' + (i+1) instead of just i+1 above.
Your tags say jQuery, so:
$("li").each(function(i){this.id = i})
So you can learn: you make a collection of HTML nodes with the $('foo') syntax. You use CSS selectors, so li will get -every- <li> on the page.
.each loops over those collected HTML elements, and does something to them. The 'something' is in the code function(i){this.id = i}. jQuery passes which loop you're on to the function as i, and the code inside the curly braces sets the id of that particular element to i.
If you need id's for styling, that's a bad idea. What you should do is use css 3 pseudo class :nth-child(n) which is in your area of css.
I'm going to wrap your code in a div so it's easier to code for
<div id="increment">
<li>Item number 1</li>
<li>Item number 2</li>
<li>Item number 3</li>
</div>
And js would be:
function loadcode(){
var increments = document.getElementById("increment");
var li = increments.getElementsByTagName("li");
for (i=0;i<li.length;i++) li[i].setAttribute("id", i+1);
}
and in your HTML:
<body onload="loadcode()">
This, I'm sure is a pretty basic question about JavaScript, so apologies in advance.
I have simple unordered list:
<ul>
<li>Item number 1</li>
<li>Item number 2</li>
<li>Item number 3</li>
<li>Item number 4</li>
<li>Item number 5</li>
</ul>
How would I be able to prepend an incremental number to those 5 items,
so I get:
<ul>
<li><span>1</span>Item number 1</li>
<li><span>2</span>Item number 2</li>
<li><span>3</span>Item number 3</li>
<li><span>4</span>Item number 4</li>
<li><span>5</span>Item number 5</li>
</ul>
The logic behind the increment variable is getting me.
You can iterate over the elements using $.each, using the index argument on the callback function, then build the span element using the current element, and we prepend it to the li:
$('ul li').each(function (i) {
$('<span>'+ (i+1) +'</span>').prependTo(this);
// or $('<span></span>').html(i+1).prependTo(this);
});
Check the above snippet here.
Note that I'm adding one to the index i+1, that's because the indexes are zero-based, also I wrap the addition between parentheses because it is in the middle of a string concatenation.
In steps it'd look like this:
You take all LI items and iterate through all of them by adding span with (lis[index]+1)
Next time you insert a LI element you insert it with span who's text is lis.length+1.