Trying to create a pseudo dropdown select, What I am trying to do is when a li is clicked, the content of <span></span> is replaced with the content of the clicked li
The problem is that its working only for the first click, not for the subsequent ones. What am I missing here.
Here is the unordered list
<div id="dd" class="language-selection" tabindex="1"><span>Language</span>
<ul class="dropdown">
<li>Profile</li>
<li>Settings</li>
<li>Log out</li>
</ul>
</div>
Here is the jQuery code :
jQuery('.language-selection ul li').click(function(){
var languageSelection = jQuery(this).text();
jQuery('.language-selection span').replaceWith(languageSelection);
});
replaceWith replaces the actual element with new contents passed as argument to this method,due to which it works for first time. afterwords no span element exist on first replacement.
Use .text() instead of replaceWith to set text to element.:
jQuery('.language-selection span').text(languageSelection);
Related
I have the following HTML:
<div class="filter_dropdown_con">
<a class="trigger" href="0">all items</a>
<div class="dropcontainer">
<ul class="dropdownhidden">
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</div>
</div>
In my JS I use the following code on the level of the li element:
// get href of <a> tag of a clicked li tag
liahref=this.getElementsByTagName('a')[0].href;
// remove domain path, ie. remove everything until the slash
liahref=liahref.substring(liahref.lastIndexOf("/") + 1);
// put it into the href of the trigger a tag
trigger.href = liahref;
My question: In the last line ob the above JS, how can I address ONLY the trigger element of the div structure which contains the clicked li element? Because when I write "trigger.href", then ALL trigger-elements also in other div structures on the same page with similar drop down menus that include the "trigger" class get the value.
** EDITED: **
Background: The JS excerpt above is part of a major JS script to turn a select menu into a drop down menu with li elements. Here is the complete script:
http://jsfiddle.net/9dy7D/
I am developing an html5 application using backbone.js. The format of html includes list elements. The labels of li elements come from web service.I am populating li elements dynamically .
I am taking all the labels in a collection and sending to Template.
Now I want to insert every 2 li elements in ul elements dynamically.How can I achieve that?
My html is looking like
<div class="auto_data">
<li>
<label style="color:white">Name<sup>*</sup></label><input type="text">
</li>
<li>
<label style="color:white">Age<sup>*</sup></label><input type="text">
</li>
<li><label style="color:white">Gender<sup>*</sup></label><input type="text">
</li>
<li>
<label style="color:white">salutation<sup>*</sup></label><input type="text">
</li>
</div>
Now i want to insert ul element for every two li elements
<ul>
<li>....</li>
<li>....</li>
</ul>
Now Iam writing in my view
like
_.each(this.questionReferenceCollection.models,function(model){
uiControl=model.get('UIControlType');
if(i==0){
$('.auto_data',self.el).append('<ul>');
}
i++;
$('.auto_data',self.el).append(new questions({
model:model,
controlType:uiControl
}).render().el);/* this will render li template */
if(i==2){
$('.auto_data',self.el).append('</ul>');
i=0;
}
});
But because of asynchronous call,
it results in
<ul></ul>
<li>...</li>
<li>...</li>
<ul></ul>
<li>...</li>
<li>...</li>
<li>...</li>
I want
<ul>
<li>..</li>
<li>..</li>
</ul>
Please suggest me.
You can loop over the collection in your template for example. In that loop you can use the modulo operator (%) to determine whether or not the current index is dividable by 2. If so, you add a closing ul and an opening ul at that point.
Edit: Updated with a slightly more simple approach.
This is a little trickier than it first looks, but by using some creative selectors, the code to do it isn't too bad in the end:
var $autoDataDiv = $(".auto_data");
while ($autoDataDiv.children("li").length > 0) {
var $newUL = $("<ul />");
$newUL.append($autoDataDiv.children("li:first"));
if ($autoDataDiv.children("li:first")) {
$newUL.append($autoDataDiv.children("li:first"));
}
$autoDataDiv.append($newUL);
}
Basically, what it does is selects the <li> elements that are immediate children of the "auto_data" <div> and then moves them in pairs into newly created <ul> elements and then appends those elements to the original parent <div>.
The "trickiest" part of the code is the fact that you use $autoDataDiv.children("li:first") twice when moving the <li>'s to the new <ul>. The reason why that works is that, when an <li> is moved into the new <ul>, it is no longer an immediate child of the "auto_data" <div> and, therefore, is no longer returned by the selector. So, when the first <li> that gets moved over to the <ul>, it disappears from the selection group and the next <li> moves into it's place as the one returned by $autoDataDiv.children("li:first").
Anyway, this should work for you . . . let me know if you have any questions.
I'm trying to find an element in div called wrapper which has a class of active but is not the one I've just clicked.
Here is my code which works if I click on the .title class:
$(".title").click(function(){
if ($("#wrapper ul li").hasClass("active")) {
alert("found one!");
}
});
But i have no idea how to check if its not the one I've clicked. I tried adding .not(this) and .not($(this)) to my if statement to no avail.
I should add i plan to removeClass of any that are not the current selected div.
I'm sure I have something wrong somewhere.
for reference heres the HTML:
<div id="wrapper">
<ul>
<div class="title">Title</div>
<li class="active">Active Clicked List Item</li>
</ul>
<ul>
<div class="title">Title</div>
<li>Some Other List Item</li>
</ul>
<ul>
<div class="title">Title</div>
<li>Some Other List Item</li>
</ul>
</div>
Any Suggestions on how I can do this?
Please note that your html is invalid, DIV can not be a child of UL. Selector is not correct either using $('.title') since it is not the class that you are applying active to
hasClass() returns a boolean, so is not chainable
Not exactly sure what you are trying to do but based on code shown you need to use the not() filter before hasClass():
if ($("#wrapper ul li").not(this).hasClass("active")) {
OR
if ($("#wrapper ul li.active").not(this).length) {
If all it is for is to remove the class, simply remove the active class from all before adding to the current one and you don't need to test for it first
Using not works fine to exclude an element:
$('#wrapper li').click(function(){
$('#wrapper li').not(this).removeClass('active');
$(this).addClass('active');
});
Demo: http://jsfiddle.net/97DXe/
If you comment out the addClass, you will see that clicking the already active element doesn't remove the class from it.
If you are going to set the active class on the clicked element, it doesn't do much harm to simply remove the class from all the elements first, so then you wouldn't need the not.
Okey so I got a List that's beeing created depending on the information from a database. the end result looks something like this:
<ul id="menu">
<li onclick="testFunction(1, "text")">Title1</li>
<li onclick="testFunction(2, "text")">Title2
<ul class="sub">
<li onclick="testFunction(3, "text")">Title3</li>
</ul>
</li>
<li onclick="testFunction(4, "text")">Title4</li>
</ul>
Now, I want to send the id and the text to the function "testFunction". This works great with the primaty li elements, but when I click a li element from the "sub" class, the function is first run on the pressed li element and then on the li element above. So in this case, if i press Title3, the function will first be ran with id 3 and then with id 2 witch is the parent element. I am thinking it's somehow accessing the whole li tree somehow but can't really understand why. any thoughts?
I need to get every element with a specific id, get the parent of the object, and set its ID.
How would I do this?
I have this code:
<li id="edge_top"> </li>
<!-- Menu Items Here -->
<li id="not_selected"><a id="selection_link" href="index.htm">Home</a></li>
<li id="not_selected"><a id="selection_link" href="page1.htm">Subitem 1</a></li>
<li id="not_selected"><a id="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li id="edge_bottom"> </li>
I need to find all the anchor elements with the id "selection_link", get the parent (the "list item" element [li]) and set its ID to "selected". How would I do this with jQuery? I'll be using the conditioning to determine if the li element will actually be allowed to get the new ID. (if the URL matches the href property of the anchor element).
HTML specification specifies that an ID should only be applied to 1 element. You can't have more then one element with the same ID.
In this case, it's better to use classes.
TO select by class:
$(".classname")...
EDIT: An example based on your code:
<li class="edge_top"> </li>
<!-- Menu Items Here -->
<li class="not_selected"><a class="selection_link" href="index.htm">Home</a></li>
<li class="not_selected"><a class="selection_link" href="page1.htm">Subitem 1</a></li>
<li class="not_selected"><a class="selection_link" href="page2.htm">Subitem 2</a></li>
<!-- Menu Items End Here -->
<li class="edge_bottom"> </li>
<script type="text/javascript">
$(document).ready(function(){
$(".selection_link").parent().removeClass("not_selected").addClass("selected")
});
</script>
You need to use classes for that. In HTML you not allowed to use ID's multiple times.
The id attribute should be unique across your XHTML document, so this question is not really valid.
Although this may work if you really insist:
$("[id=xx]")
$('li a').each(function(){
if ($(window).attr('location').href.match($(this).attr('href'))) {
//example with class
$(this).parent().addClass('selected');
// example with id
$(this).parent().attr('id', 'selected');
}
});