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.
Related
<div id="a", class="1">
<div class="2">...</div>
<ul id="b", class="3">
<li class="4">...</li>
<li class="4">...</li>
<li class="4">...</li>
<li class="4">...</li>
</ul>
<div class="5">...</div>
<div class="6">...</div>
</div>
This is some existing code on the site I'm making my extension for and what I want is I want to create an array with all the li elements. So for example if there was 7 li elements my array would have all 7 inside the array, if there was 5 the array would have 5 li elements.
I had a go of the answers over here but the answer by Burak put the 3 div's surrounding the ul into my array and the answer by Antonio put nothing into my array.
A solution is to use
document.querySelectorAll('#b li');
Wich will select all li in the element that has id="b"
You'll found useful docs here https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
I have a setup like this
<ul>
<li> link
<ul>
<li> link
<ul> ... etc
</ul>
</li>
</ul>
So several nested uls, I need to figure out some way to find what level of nesting the ul has based on link that was clicked inside it, is it a top (1st) middle (2nd) etc.. one
If you have clicked element <li> (in your event handler) you can just count all parent <ul> elements
element.parents('ul').length
You can use
$("a").click(function(){
alert($(this).parents("ul").length);
});
Fiddle
Given a tree of information, I have a need to "filter" the data in such a way that if someone queries for "Beta", they see Category 1 > Beta > ShowThisasWell
A crucial point is that these <ul><li><div> are created by some other component from json data. For the time being, I'm only concerned about the case where the nodes are created in dom. I'll figure out how to invoke the code to filter the actual data.
<div>
<ul>
<li>
<div>Category 1</div>
<ul>
<li>
<div>Beta</div>
<ul>
<li>
<div>ShowThisasWell</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
function filter(query) {
$('li').hide();
$('li li > div').each(function(){
if($(this).text() == query) {
$(this).parents('li').show();
$(this).next().find('li').show();
}
});
}
This is specific to the code you provided, and will probably need to be tweaked (I'd add an id / class on your parent div to identify it within the document).
JSFiddle http://jsfiddle.net/va7yh/
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 tried this to remove the adjacent li, but it doesn't work:
$(this).prev(".Removable").remove();
Edit: I only want to remove the immediate adjacent li if it has that class.
WHEN SELECTABLE IS CLICKED I WANT THE PREVIOUS REMOVABLE TO VANISH
<ul>
<li class="Removable"> <li>
<li class="Selectable"> <li>
<li class="Removable"> <li>
<ul>
It worked for me: http://jsbin.com/esija/edit
$(document).ready(function() {
$(".Selectable").click(function(){
$(this).prev(".Removable").remove();
return false;
})
});
But it only removes the previous sibling as advertised.
Without seeing your html structure it's hard to tell the best selector to use, but you can try a catch-all traversal with closest, to hit the current <li> no matter where you start traversing from:
$(this).closest('li').prev('li.Removable').remove()
See Traversing/closest.