I have one ul li list and I want to put that content between ..
What I have
<div id='a'>
<ul>
<li>
<li>
<li>
</ul>
</div>
what I want to do is that using jquery I want to add div before and after this content like this
What I want
<div id='a'>
<div id='b'>
<ul>
<li>
<li>
<li>
</ul>
</div>
</div>
What I am using is append or before but not getting properly result.
I used following code.
$("#a").prepend("<div id='b'>");
$("#a").append("</div>");
But I got result like this.
<div id='a'>
<div id='b'></div>
<ul>
<li>
<li>
<li>
</ul>
</div>
please help me.
You can use .wrap() to do this:
$("ul").wrap("<div id='b'></div>");
Demo Fiddle
Use wrap()
This will exactly do what you want:
$("#a > ul").wrap("<div id='b'></div>");
Look at the doc: http://api.jquery.com/wrap/
Try this
$("ul").wrap("<div id='b'></div>"); and here is the working example
Related
I have a problem that I'm trying to solve but can't find the cause.i am using ckeditor5 i have problem when i try to add html classes via editor
<ul class="test">
<li>twsafs</li>
<li>twsafs</li>
<li>twsafs</li>
<li>twsafs</li>
</ul>
i want to use it like this but the editor is rendering as below
<ul>
<li class="test">
twsafs
</li>
<li class="test">
twsafs
</li>
<li class="test">
twsafs
</li>
<li class="test">
twsafs
</li>
</ul>
I can't figure out the reason, if you can help I would be glad
I tried to allow all classes with htmlSupport but no change.
i try
I'm trying to use javascript to add a custom div after my last child of a unordered list, the result should basically look like this.
<ul class="mylist">
<li> content </li>
<li> content </li>
<li> content </li>
<li> content </li>
<div>custom div</div>
<ul>
I am getting this far, but don't know if it's close to be the right solution.
I cant get it to work
$( document ).ready(function() {
document.getElementByClassName("myList").lastChild.innerHTML = "<h1>test</h1>";
}
You can use jquery and append the div though this is not a valid markup.append() dynamically add child element.
$(function(){
//this is valid child of <ul>
$('.mylist').append('<li>custom content 1</li><li>custom content 2</li>');
//this is invalid markup but you asked for though
$('.mylist').append('<div> custom content 1 </div><div> custom content 2</div>');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mylist">
<li> content </li>
<li> content </li>
<li> content </li>
<li> content </li>
<ul>
Native DOM implementation using querySelector and insertAdjacentHTML methods
document.querySelector('.mylist > li:last-child')
.insertAdjacentHTML('afterend', '<li><h1>Test</h1></li>')
<ul class="mylist">
<li> content </li>
<li> content </li>
<li> content </li>
<li> content </li>
</ul>
a div as a child of ul is not valid in html for you to insert the div you need to first add list then have the div inside of the list something like this
<ul class="mylist">
<li> content </li>
<li> content </li>
<li> content </li>
<li> content </li>
<li>
<div>custom div</div>
</li>
<ul>
since yyour list child is a list then you script that could either append hence replacing <div>custom div</div> with <h1>test</h1> should be something like this since we are appending inside of the last li tag
$( document ).ready(function() {
document.getElementByClassName("myList")
.lastChild.innerHTML = "<h1>test</h1>";
}
that way your markup is valid and and test is rendered on browser
I'm having some problems understanding the stracture of JQuery elements and how to move through the DOM tree.
My aim is to highlight (background color) the clicked link (a).
if the "li a" is inside ul which is not the main "menu" ul (meanning sub-menu link) then i want to highlight both the sub menu link and the top menu link.
My HTML code is:
<div id="site">
<div id="koteret">
<div id="top_menu">
<ul id="menu">
<li><a href="welcome.html" id="wel" title="HomePge" >home</a></li>
<li>read
<ul class="par">
<li><a href="welcome.html" id="b" title="title" >test</a></li>
<li>addRead</li>
</ul>
</li>
<li><a href="books.aspx" title="Books" >Books</a>
<ul class="par">
<li>Search</li>
<li>Register</li>
</ul>
</li>
<li><a href="contact.html" id="a" title="Contact" >CoNTACT</a></li>
</ul>
</div>
</div>
<div id="test">
<iframe id="con" src="welcome.html">ffffffffffffffffffffffffffffffsdfdsfsdfwefwfwfw
fwfwefwe<br />fwefwefw</iframe>
<div id="side_bar">fsfdsfsdf</div>
</div>
<div id="footer">footer</div>
</div>
</body>
As for the JQuery i tried this:
$(this).closest("ul").find("a").attr("id"));
and a few other versions with parents but i get "undefined" or empty strings when i check with alerts.
Can you help me understand where is my mistake?
I'm sure it's something very simple i just can't find it.
Thanks
To highlight the submenu link and its top most parent link use the following code:
$(this).css("background-color","red");
$(this).parents("li").last().find("a:first").css("background-color","red");
The first line highlights the link.
The second line will look for the top-most 'li' then select its immediate 'a' tag and highlight it
UPDATE:
To remove the highlight of the previous click use a CSS class:
.highlight {
background-color: red;
}
Then use the following code:
$("#menu").find(".highlight").removeClass('highlight');
$(this).addClass('highlight');
$(this).parents("li").last().find("a:first").addClass('highlight');
I am trying to access curr-dish and sub-dish class using jquery of third dish-wrapper div class...
how to access it since all three divs have same class
i want to access only third div...
i dont want to add any ids to the div..
providing my code below
<span class="status">
<div class="dish-wrapper">
<ul class="dishations">
<li class="curr-li">
<div class="curr-div">
<a class="curr-dish sub-dish" "></a>
</div>
<ul class="dish-ul">
</li>
</ul>
</div>
<div class="dish-wrapper">
<ul class="dishations">
<li class="curr-li">
<div class="curr-div">
<a class="curr-dish sub-dish" "></a>
</div>
<ul class="dish-ul">
</li>
</ul>
</div>
<div class="dish-wrapper">
<ul class="dishations">
<li class="curr-li">
<div class="curr-div">
<a class="curr-dish sub-dish" "></a>
</div>
<ul class="dish-ul">
</li>
</ul>
</div>
</span>
you can
$('.dish-wrapper:eq(2) .curr-dish.sub-dish')
You can use :eq to get element at particular location the and combine classes using dot .
$('.dish-wrapper:eq(2)').find(' curr-dish.sub-dish');
To access the last element you can use :last or .last()
$('.dish-wrapper:last').find(' curr-dish.sub-dish');
Using :eq() is best way to access the third element like what others said. To access the curr-div and curr-dish sub-dish seperately, use can use the following:
$('.dish-wrapper:eq(2)').find('.curr-div');
$('.dish-wrapper:eq(2)').find('.sub-dish');
or collectively:
$('.dish-wrapper:eq(2)').find('.sub-dish,.curr-div');
NOTE: Please specify the class name without spaces so that it helps to access it in jquery/javascript. Ex. Here "curr-dish sub-dish" class name is not allowing to search for the class name precisely, able to check only the last part of the class name.
Good Luck!
How do I get the jQuery UI Accordion to work when I need to put a wrapper around each element?
Example HTML:
<ul>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>
I just can't seem to get it to work.
You cannot make the accordion work with your current markup. Elements must be siblings like this:
<div id="parentAccordionDiv">
<h3>header</h3>
<div>
Content goes here
</div>
<h3>header</h3>
<div>
Content goes here
</div>
</div>
I stand corrected. I got an accordion to work fine like this:
<script type="text/javascript">
$(function(){
$('#accordion').accordion();
})
</script>
<ul id="accordion">
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
<li>
<h3>header</h3>
<div>
Content goes here
</div>
</li>
</ul>