We Keep Coding

How to make a contenteditable of only lists?

I'm trying to create a contenteditable editor where everything is a list. However if I simply give a ul tag contenteditable="true", the top list item can be deleted. How do I make it so that every new line is a list, and the top line li cannot be deleted. Thanks
Here's what I've got :
<ul style="height: 300px;" contenteditable="true">
<li>Type text here. Try deleting this list item.</li>
</ul>

The most trivial way of solving your problem would be insert an empty non-editable <span> into the first <li> element.
This is also not absolutely fool-proof, but will protect the first <li> element against most edit attempts.
<ul contenteditable="true">
<li><span contenteditable="false"></span>Type text here. Try deleting this list item.</li>
<li>editable!</li>
</ul>

How to Select the last 'li' which is changing dynamically for each run in the 'Ul' Using selenium driver

<ul class="drillDownMenu l_drillDown" style="left: -498px;">
<li class="hasSubs">
<a id="RAL10" href="javascript:;">
<ul class="active">
<li class="hasSubs">
<li class="hasSubs">
<a id="AL101117" href="javascript:;">AR Invoices</a>
<ul class="displayed active">
<li>
<a id="FAL10111726" onclick="LoadQueryWindow(this,'104')">AR Invoices</a>
</li>
<li>
<a id="FAL10111727" onclick="LoadQueryWindow(this,'134')">All AR Invoices 1</a>
</li>
</ul>
</li>
I am trying to use the below driver statement,
driver.findElement(By.xpath("//*[contains(#id,'FAL10111727')]")).click();
But this selects the first element, I want to select the last element in the list.
Thanks

Try this xpath expression:
(//ul[ #class='drillDownMenu l_drillDown']//li)[last()]
it picks all li elements that are childs of the topmost ul, then picks the last element from the whole set.

As per the HTML you have shared,
To select the last 'li' which is changing dynamically for each run, All AR Invoices 1 in this case you can use :
driver.findElement(By.xpath("//ul[#class='displayed active']//following::li[last()]")).click();
But, I suppose the <li> tags won't receive a click and you have to invoke click() method on the inner <a> tag instead as follows :
driver.findElement(By.xpath("//ul[#class='displayed active']//following::li[last()]/a")).click();

//I tried using this which worked
driver.findElement(By.cssSelector("ul.displayed li:last-child a")).click();

Finding what child the nested ul is based on link clicked inside it

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

how to insert every two li s in ul using javascript

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.

How to Remove Previous li of particular class?

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.