In all the research I have found, they invoke binding an even to the element with .on(), but that not what I need. Here is a brief example:
<div id="myElement">
<ul id="myUl">
<li>content list 1</li>
<li>content list 2</li>
</ul>
</div>
After an ajax call, I replace the content of myElement using:
var div = $("#myElement");
div.replaceWith('<div id="myElement">
<ul id="myUl">
<li>new content list 1</li>
<li>new content list 2</li>
</ul>
</div>');
Now if I want to access the unordered list to add for example a class name: div.find("ul").addClass("myClass"); it doesn't work. Any idea how to solve this?
This works for me...
added a # to get the element using ID
used the ID again after replacing
escaped the newlines
changed className
Note you will have to do the replacement in the success of the Ajax
var div = $("#myElement");
div.replaceWith('<div id="myElement">\
<ul id="myUl">\
<li>new content list 1</li>\
<li>new content list 2</li>\
</ul>\
</div>');
$("#myElement").find("ul").addClass("myClass");
console.log($("#myElement").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myElement">
<ul id="myUl">
<li>content list 1</li>
<li>content list 2</li>
</ul>
</div>
Related
I have my html as follows:
<button id="hamburger-nav"></button>
<nav>
<ul>
<li>
<button>Sub Nav Item 1</button>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</li>
<li>
<button>Sub Nav Item 2</button>
<ul>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
</li>
<ul>
</nav>
This is a mobile menu that has a hamburger button that activates the "nav" on click. How do I get the index of the sub nav buttons so I can active their sibling "ul" sub sub menu? Granted all of this has to be done on the onclick method since it is a mobile menu.
I was hoping to have a universal method that could find the index of (this), i.e., the item that is clicked, and then get the corresponding "ul", instead of individually naming these and creating a massive, duplication of code for each menu section.
I would like to use plain old JavaScript as I am trying to cut down on the dependencies of jQuery, etc. Something along the lines of:
var menuButtons = document.querySelectorAll("nav > ul > li > button");
var submenu = document.querySelectorAll("nav > ul > li > ul");
menuButtons.onclick = myFunction(this);
function myFunction(v) {
submenu[v].classList.add("open");
}
While I know this JavaScript doesn't work, accessing the index of the clicked button and opening its accompanying nav was my thought process. But perhaps I'm way of going about this.
Thank you in advance!
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 have a problem with a jquery menu. I want one of the the menu links to go to an external site and not a frame within the slides. At present is just opens a blank frame on TEST3.
How would I get it to open an external URL within the same page?
There is a test page located here to understand the issue. http://www.vendvalor.com
<section class="content">
<nav class="main-menu big">
<a data-id="Test1" href="javascript:void(0)">Test1</a>
<a data-id="Test2" href="javascript:void(0)">Test2</a>
<a data-id="Test3" href="http://www.google.com">Test3</a>
<a data-id="Test4" href="javascript:void(0)">Test4</a>
</nav>
I too had the same problem..
Got the solution
<ul id="nav">
<li class="current">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</li>
<li>Some other link</li>
The custom.js is
$('#nav').onePageNav({
filter: ':not(.external)'});
It worked.. Via: https://github.com/davist11/jQuery-One-Page-Nav
The great Google and SO didn't render search results regarding this. Some were similar but didn't quite get me there.
I am in need of making a classless submenu that will attach a style attribute to each individual <li> in the sub <ul> in order to set a min-width property based on the number of sub list items.
The HTML
<nav>
<ul>
<li>HOME</li>
<li>ABOUT COMPANY</li>
<li>
ABOUT PRODUCT
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>GETTING STARTED</li>
<li>
PATIENT SUPPORT
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>CONTACT</li>
<li>eUPDATES</li>
</ul>
</nav>
The JavaScript
$('.sub').text(function() {
var count = $(this).next().find('li').length;
var totalwidth = count * 115;
$(this).next().find('li').parent('ul').attr('style','min-width:'+totalwidth+'px');
});
I need to be able to do this without searching based off the class "sub". I've tried a few times, but none of it seems as powerful as the code I'm currently using. The backend developer I'm working with is requiring it to all be simple <ul><li></li></ul> structure with no classes.
If anyone can help point me in the right direction on this, I'd greatly appreciate your time and help!
Target all LI items that contain UL's, find the number of LI's in those UL's, and multiply for width :
$('ul', 'li').css('min-width', function() {
return ( $(this).find('li').length * 115 ) + 'px';
});
I can't seem to find a solution for this after hours of searching :-(
I've tried to no avail:
jQuery('#someGlobalNav').delegate('*','keyup', function(){
if(!(jQuery('#itemsForSale').find(jQuery(this))){// do something}
jQuery("#itemsForSale, #itemsForSale > * ").focusout(function(){}
Tried using :not, and :contains.
Basically, I have a grouping of links. Lets use this below:
<div id="someGlobalNav">
<ul id='siteNavigation'>
<li id="itemsForSale">
<div id="items">
<ul id='itemNav'>
<li>
<div id="menu1">
<ul>
<li>menu 1 item 1</li>
<li>menu 1 item 2</li>
</ul>
</div>
</li>
<li>
<div id="menu2">
<ul>
<li>menu 2 item 1</li>
<li>menu 2 item 2</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Link that Might exist</li>
<li>AnotherLink that Might exist</li>
</ul>
<div>Arbitrary link</div>
</div>
everything is captured fine etc.. the only issue is, I want to ONLY act on elems that are NOT "itemsForSale" or its children. So, as a user keyups thru links, all is fine UNTIL they keyup on somethign outside of itemsForSale --
I figured to use :not - but I won't know the selectors as the nav is dynamic. I tried all sorts of other things no luck.
Any ideas
An over simplified solution to your problem would be like this:
$('a:not(#itemsForSale *)');
Demo on jsbin: http://jsbin.com/idijos/1/edit