I wanna ask is it possible if we adding div element with jQuery, but I need condition like this:
My code before
<li>
<div class="another"></div>
</li>
And what I want is:
<li>
<div class="new">
<div class="another"></div>
</div>
</li>
If it possible, I hope someone can help me.
You could create the new element, append it wherever you want, then append the elements you want into the new element:
var wrapper = $('<div class="new"/>');
$('li').find('a').first().after(wrapper).nextAll().appendTo(wrapper);
The criteria for what you want is not completely clear, but you can try using wrapAll: $(".2, .3, .another").wrapAll("<div class='new' />");
$(".2, .3, .another").wrapAll("<div class='new' />");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li>
<div class="another"></div>
</li>
Related
I'm trying to access the elements that are appended by a library that I use in my code, but I can't access them. I have this line in my html.
<div class="bonds" id="original" style="display:block;"></div>
The library that I use will append some elements in here. So from the DOM inspector, it shows something like this.
<div class="bonds" id="original" style="display:block;">
<!-- append start -->
<div class="FL-main fieldsLinker">
<div class="FL-left">
<select></select>
<ul>
<li data-offset="0"></li>
<li data-offset="1"></li>
<li data-offset="2"></li>
</ul>
</div>
</div>
<!-- append ended -->
</div>
I'm trying to access the <ul></ul> element using the methods below but nothing works.
$('#original').children().children().children();
var original = $('#original').find('ul');
My goal is to append <span class="icon-close"></span> in each of <li></li> element when the page is loaded.
You could use JQuery find method to find the ul and loop over it's children.
Add your script at the end of all scripts. (library scripts).
$('#original').find('ul li').each(function(i) {
$(this).append('<span class="icon-close"></span>');
});
With Jquery, I am trying to make a function similar to the filtering system used in this website(example)
If you click one of the filter elements, it will be displayed in another area. You can remove the selected filter by just clicking it.
My code works for cloning a filter element and displaying it in another area but
I am having a trouble with removing it.
I did hours of research but could not find any solution so your help will be greatly appreciated!
Here is my code
---html---
<div id="filter-selected>
<ul>
<!--selected element comes here -->
</ul>
</div>
<div id="filter-options">
<ul>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value1</span>
</li>
<li>
<!--clicking this list will clone itself to the above area-->
<span>Value2</span>
</li>
</ul>
</div>
---Jquery---
$('#filter-options > ul > li').click(function(event){
var $filter = $(this).children('span').clone();
$filter.appendTo('#filter-selected > ul').wrap('<li class="filtering"></li>');
});
$(.filtering').click(function(){
$(this).remove();
});
Since the elements are created dynamically, You need event delegation
$('#filter-selected').on('click', '.filtering', function(){
$(this).remove();
});
You are missing string quote on left side ' of .filtering which might be a problem.
$(.filtering').click(function(){
I have been trying to make an element(A)'s display to block, when another element(B) has the mouse over it, and then return it to none after the mouse leaves A, here are my attempts so far:
First here's a part of the HTML
..
<ul>
<li class="firstli">
<img class="userLogo" src="media/images/eSahara.jpg">Configurer</li>
<li>Supprimer</li>
<li>Déconnecter</li>
</ul>
</li>
</ul>
<div id="cimsgContainer"><p>Changer votre <br> image de profile</p></div>
and now my attempts
<script type="text/javascript">
$(".userLogo").mouseenter(function(){$("#cimsgContainer").css("display","block");});
$(".userLogo").mouseleave(function(){$("#cimsgContainer").css("display","none");});
</script>
<script type="text/javascript">
$(".userLogo").hover(function(){$("#cimsgContainer").css("display","block");},function(){$(this).css("display","none");});
</script>
Very important note: I already did my research and all I found is to change a child's CSS when the parent is hovered, in my case B is not a child of A neither is A a child of B.
A's id = #cimsgContainer; B's id = #userLogo
Thank you
<ul>
<li class="firstli">
<img class="userLogo" src="media/images/eSahara.jpg">Configurer</li>
<li>Supprimer</li>
<li>Déconnecter</li>
</ul>
</li>
</ul>
<div id="cimsgContainer"><p>Changer votre <br> image de profile</p></div>
<script>
$(".userLogo").hover(function(){ $("#cimsgContainer").css("display", "block"); }, function(){ $("#cimsgContainer").css("display", "none");});
</script>
Appears to work for me.
Is this what you want?
#target will select the element with the id=target.
.target will select all elements with class=target.
You need to properly target your image using the class selector. $(".userLogo")
Moreover, perhaps you wanted the element after the logo to show when hovered, but not show otherwise? In that case, you can try something like this:
$(".userLogo").hover(
function(){$(this).next().show()},
function(){$(this).next().hide()}
);
Here is a jsFiddle Demo for that scenario
or more simply:
$(".userLogo").hover(function({$(this).next().toggle()});(http://jsfiddle.net/3gPHR/2/)
While using jQuery Mobile <ul data-role="listview">, I am trying to add some <li>s from JavaScript, but the new <li> is not inheriting the jQuery Mobile styles. Here is the code:
<head>
<script>
function init()
{
msg = "<li> <a href=> New List Item </a></li>";
document.querySelector('#add_item').innerHTML += msg;
}
// call init on load
window.addEventListener('load',init,false);
</script>
</head>
<body>
<div id='main' data-role='page' data-theme='c'>
<div data-role='header'>
<h1>Welcome!</h1>
</div>
<div id='content' data-role='content'>
<ul data-role="listview" id="list_cars">
<div id="add_item">
</div>
<li> List Item 1</li>
<li> List Item 1</li>
</ul>
</div>
<div data-role='footer'>
<h4>Enjoy reading the book ...</h4>
</div>
</div> <!-- End of Min page -->
</body>
First, you're putting your <li> inside a <div> instead of directly inside the <ul>. Try changing your querySelector to...
document.querySelector('#list_cars').innerHTML += msg;
or, if you want the item at the top of the list, use this...
document.querySelector('#list_cars').innerHTML = msg + document.querySelector('#list_cars').innerHTML;
Then, you need to tell jQuery Mobile to update that list view by adding...
$('#list_cars').listview('refresh');
The last section on this jQuery Mobile Documentation page about lists describes this feature.
Working example here: http://jsbin.com/omepob/1/
To apply the properties on the new object, the optimal way is to call jQuery's refresh method for the object:
$("#myobject").listview("refresh");
However, I encourage you to replace this innerHTML call for something more DOM-atic, like:
var myli = document.createElement("li");
myli.appendChild(document.createTextElement("List Item 3"));
BTW, agreed with Travis; better include a "ul" as a parent of "li" instead of using a "div" there...
I need to add an attribute to the first link of a list of links in a project I'm working on and thinking of a way to do this using JavaScript. Here are the codes below, they are dynamically generated but what I want is to figure out a way to insert id="cover_title" in the first tag of every list of with the sequence of , So that the code looks exactly like below. Any ideas?
<ul id="gallery">
<li id="album">
<div id="album_title">Summer 2012</div>
<div id="photo"><a id="cover_title" href="#"><img src="images/photo1.png"/></a></div>
<div id="photo"><img src="images/photo2.png"/></div>
<div id="photo"><img src="images/photo3.png"/></div>
<div id="photo"><img src="images/photo4.png"/></div>
<div id="photo"><img src="images/photo5.png"/></div>
</li>
<li id="album">
<div id="album_title">Spring 2012</div>
<div id="photo"><a id="cover_title" href="#"><img src="images/photo1.png"/></a></div>
<div id="photo"><img src="images/photo2.png"/></div>
<div id="photo"><img src="images/photo3.png"/></div>
<div id="photo"><img src="images/photo4.png"/></div>
<div id="photo"><img src="images/photo5.png"/></div>
</li>
In the first place a note: id comes from identifier and has to be unique throughout the document. Your code should use the class="" attribute instead. See, e.g., MDN on this:
The ID must be unique in a document, ....
That being said, the below code sets the appropriate class on th <a>-element, assuming that you transformed all id attributes above into class.
var links = document.querySelectorAll( 'div.photo:nth-child(2) a' );
for( var i=0; i<links.length; ++i ) {
links[i].classList.add( 'cover_title' );
}
EDIT
Here is an example fiddle: link.
Vega said it right: don't do dublicate ID, use class. Simple in jQuery
$('.album_title').each(function(){
$(this).find('a:first').addClass('cover_title');
});