I have a an unordered list like this:
<ul id="mylist">
<li id="1">Heading</li>
<li id="2">Second</li>
</ul>
What I want to do is, when I add another list item:
<li id="3">First</li>
It needs to be prepended to the list item which is just below the first list item in "mylist". ie, just below 'Heading' in this case. So the final list looks like this:
<ul id="mylist">
<li id="1">Heading</li>
<li id="3">First</li>
<li id="2">Second</li>
</ul>
Thanks in advance.
NB: What I learned from trying to implement this is, when we append or prepend some content to an element selected with jQuery, it'll get prepended or appended to the content inside the selected element.
You can use after method and :first selector:
$('#mylist li:first').after('<li id="3">First</li>')
http://api.jquery.com/after/
You can use .after, or .insertAfter, for being more precise about placement in the DOM tree.
Related
I'm using TinyMCE 6 and I've created a custom block insert using a <ul>, and for the most part this is working great. However, if I have several and position the cursor in front of one of the blocks and hit backspace, it then merges all the contained <li> into a single <ul>. I've tried using attributes like data-id, id, name etc but Tiny simply discards this data from one of the elements and does the merge anyway. If I use a random number as a class name, they do not merge so this is a workaround.
For reference, the blocks are set as noneditable (I have a double-click handler configured for a custom function), so I don't see why it would try and merge them anyway.
Any ideas?
Here's a snippet of HTML as it should be:
<ul id="123" class="leaders mceNonEditable">
<li class="item-en text_gold"><span>Mmm Cookies</span><span>$MONEY$$$$$$</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
</ul>
<ul id="234" class="leaders mceNonEditable">
<li class="item-en"><span>Mmm Cookies</span><span>$495</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
</ul>
And some that ended up:
<ul id="123" class="leaders mceNonEditable">
<li class="item-en text_gold"><span>Mmm Cookies</span><span>$MONEY$$$$$$</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
<li class="item-en"><span>Mmm Cookies</span><span>$495</span></li>
<li class="item-ja"><span>SOMEJATEXT</span></li>
</ul>
Could you please help me in dynamically calling attrib value through jQuery from the 'li class' by identifying the 'itemprop'?
My HTML is as below,
<ul class="blockNoBordr">
<li class="specHeading">Model</li>
<li class="specText" itemprop="model">
<span class="attribVal newattribVal">32LJ573D</span>
</li>
</ul>
I want to dynamically call Model value into a JS code i.e., 32LJ573D
console.log($('ul li[itemprop="model"].specText').first().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="blockNoBordr">
<li class="specHeading">Model</li>
<li class="specText" itemprop="model">
<span class="attribVal newattribVal">32LJ573D</span>
</li>
</ul>
You need to pick li inside your ul with a specific class. The following code will work for you. I have printed text of li with class "specText" for reference. You could modify any attribute as per your requirement.
console.log($('ul li[itemprop="model"].specText').first().text());
When you choose elements by classname, multiple elements are returned in an array. So choose the first element by adding index [0].
$('.classname')[0].innerHTML
I have a mobile nav, that looks like this
<ul id="mobile-menu" class="menu>
<li class="normal-link">link-1</li>
<li class="dropdown-link">link-2
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="dropdown-link">link-3
<ul class="submenu">
<li class="link-of-dropdown>blabla</li>
<li class="link-of-dropdown>blabla</li>
</ul>
</li>
<li class="normal-link">link-1</li>
</ul>
I cant change the html/wordpress generated code, but I can add css and javascript. So is there a way for me to get next to the dropdown-link's a image that will let the submenu free. if the image is pushed the image will change. if pushed again it will go back to the normal image and the dropdown dissappears again?
I am mostly looking for answer for the problem with of javascript on the dropdown link's but just so you know what i want to do with it.
This question is so very, very vague. But I guess you're looking for the nth-child() selector.
See the docs here for more information. Target your 'mobile-menu' ul, and use nth-child to select the li elements within.
My big question would be, why can't you change the HTML? If it's Wordpress, you can modify the template to change the HTML.
You question is not really clear but if you want to retrieve an element without using id, first you may use their classes
var myClass = document.getElementsByClassName("classname"); //returns a nodeList like array
myClass[0] //first element with "classname"
You may also use tag names
var divs = document.getElementsByTagName("div");
divs[2] //third "divs"
You may also use querySelectorAll, this works pretty much like CSS selector and also returns a nodeList
var qs = document.querySelectorAll(".class");
I hope this helps
You could add a class and use the Jquery class selector: $(".class-name") to target a specific <li>
So I have a pretty strange question here. How do you find out if there are any other div elements under or above a specific div element. For my project that I'm working on right now, I have a bunch of smaller divs underneeth and i want a selector that allows the users to select any number of those divs. The way I thought of was to use a resizeable div that can be dragged around as the selector div on z-index of n+1 and the rest of the divs that are to be selected is on z-index of n. To do this I will use a combination of:
http://www.w3schools.com/cssref/css3_pr_resize.asp
and
https://jqueryui.com/draggable/
which lets me make a draggable and resizeable object div that I can use to select the divs underneath. Is there some elegant way of doing this or do I just have to go and do this the hard way by finding out it's location and manually find all the divs that are under it.
Also if there's another way to do this more elegantly i'd be all ears.
Thanks
If you are using jQuery UI, use the UI's Selectable.
From the source of the example in the link:
<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ol>
<script>
$( "#selectable" ).selectable();
</script>
var parent = jQuery(ld).parent();
var child = jQuery(id).children();
I hope that it will be a correct solution.
I have a menu and I want an element with a class of active, parent element's sibling element to be clicked automatically on page load.
Here is my HTML:
<li class="level1">
<span class="level1 drop-down clicked">Oranges</span>
<ul class="level2" style="display: block;">
<li class="level2">Peel</li>
<li class="level2">Pips</li>
<li class="level2 active">Pegs</li>
</ul>
</li>
I've tried
jQuery('li.level2.active').parent('li.level1').children('span.level1.drop-down').click();
but it does not work. I'm not sure if I'm using the parent & children method's properly.
Although, jQuery("span.drop-down.level1").click(); does work, but it selects all the elements with that class which I would like to avoid.
Try this:
jQuery('li.active').closest('li.level1').find('span.level1.drop-down').trigger('click');
Because the li.level1 is two steps up, you need .parents(), which selects up multiple levels, instead of .parent(), which is only one.
jQuery('li.level2.active').parents('li.level1').children('span.level1.drop-down').click();
^^^^