I'm using the mcDropDown plugin which is very effective.
Without reporting all the code, I just put the jsfiddle example. http://jsfiddle.net/SwxP3/
What I want to do, and I wasted hours of trials, is to get the parent of the selected node.
Example
<li rel="1">
Arts & Humanities
<ul>
<li rel="2">
Photography
<ul>
<li rel="3">
3D
</li>
<li rel="4">
Digital
</li>
</ul>
</li>
<li rel="5">
History
</li>
<li rel="6">
Literature
</li>
</ul>
</li>
In such example, if I select "3D" I want to be able to retrieve the rel property of its parent.
I played a bit with the getValue function of mcDropDown plugin, without any success.
I saw that this plugin, in the dom tree, creates hidden elements reporting the list tree structure, and also the getValue functions uses them, but I couldn't find a way of retrieving the parent (I tried with the parent() function of jquery of course)...
Does anybody have an idea of how to get the parent?
I really need this feature, so if somebody has some sulution which includes NOT using mcDropDown but any other plugin (or creating a dropdown natively with css and jquery) it is wellcomed.
$(document).ready(function (){
$("#current_rev").html("v"+$.mcDropdown.version);
$("#category").mcDropdown("#categorymenu",{
select: function(value,name){
alert($("[rel="+value+"]").parents('li').attr("rel"))
}
});
});
This get's the rel of the parent. Undefined if the selected element doesn't have a parent.
Related
I've created a custom multifield component (titled "breadcrumbs") that will be used as a page's breadcrumbs nav. Each multifield item consists of a textfield and a pathbrowser. I want to list out each multifield item as an anchor tag with the "text" property as the text and the "link" property as the href.
right now, i just have my html listing out the properties as follows:
<div>
<p>${properties.text}</p>
<p>${properties.link}</p>
</div>
which outputs this to the page:
text 1,text 2
link 1,link 2
I know how to use data-sly-list and data-sly-repeat for each of the properties to get a list of all the texts and links like this:
<ul data-sly-list="${properties.text}">
<li><p>${items}</p></li>
</ul>
<ul data-sly-list="${properties.link}">
<li><p>${items}</p></li>
</ul>
but is there a way to list out both properties into one element that would look something like this:
<ul data-sly-repeat.breadcrumbs="${properties}">
<li>
<a href="${breadcrumbs.text}">
${breadcrumbs.link}
</a>
</li>
</ul>
I have also tried data-sly-use with a custom js file, but also can't get multiple properties to loop in one element.
I'd strongly recommend going with a multifield that stores the fields as JSON or nodes like ACS multifield so you get a better data structure for your purpose. I do not recommend the below solution unless you are 100% certain that both link and text are going to be the same length AND in the correct order.
that said, assuming text and link are each multivalued properties, here is what you can do:
<ul data-sly-list.textItem="${properties.text}">
<li>
<a data-sly-attribute.href="${properties.link[textItemList.index]}">
${textItem}
</a>
</li>
</ul>
this will print:
ul>
<li>
<a title-href="link1">
</a>
</li>
<li>
<a title-href="link2">
</a>
</li>
</ul>
since the var name for data-sly-list, the custom identifier textItemList is created. We are interested in the member index on textItemList and use that to display the item at the same index in link by doing: properties.link[textItemList.index]
read more about data-sly-list in the spec
*note: you can also do this with the data-sly-repeat
Say I have this HTML:
<ul class="list-group" id="words">
<li class="list-group-item"><span class="badge">10</span>Apple</li>
<li class="list-group-item"><span class="badge">50</span>Banana</li>
<li class="list-group-item"><span class="badge">30</span>Carrot</li>
</ul>
I'm looking for a jQuery selector that will select a list item like Banana and then be able to edit its child badge to whatever value.
I was looking around and saw some very complex selectors involving contains (which isn't exact enough for me already) and lambda functions/loops spanning multiple lines and was wondering if there was a better way.
Fiddle Example.
You can use .data() like #dsh mentioned in comment, see the example below :
HTML :
<ul class="list-group" id="words">
<li class="list-group-item" data-text="Apple"><span class="badge">10</span>Apple</li>
<li class="list-group-item" data-text="Banana"><span class="badge">50</span>Banana</li>
<li class="list-group-item" data-text="Carrot"><span class="badge">30</span>Carrot</li>
</ul>
JS :
$( ".list-group-item[data-text='Banana'] .badge" ).text(); //50
Hope this helps.
$("li:contains(Banana)>.badge").text("whatever")
should be the proper selector for jQuery. However, you should try to avoid :contains() if you are not specific. The selector above has to search in every list element. If you only search in the given list use
$("#words>li:contains(Banana)>.badge").text("whatever")
instead or use data Attributes, as dsh has commented,
<ul id="my-list">
<li value="1001">item1 </li>
<li value="1002">item2 </li>
<li value="1003">item3 </li>
<li value="1004">item4 <li/>
</ul>
Is it allowed to have value for list item? If I can, how to access the value using javascript or jquery?
According to the W3C specification for LI element it is allowed to use value attribute for LI in some cases, but not this one. If you're using HTML5 use data-* attributes:
<ul id="my-list>
<li data-my-value="...">...</li>
<li data-my-value="123">...</li>
<li data-my-value="...">...</li>
</ul>
To get a reference to a particular element using jQuery use following selector:
$("ul#my-list li[data-my-value='123']")...
Or, if you already got reference to all LI elements use jQuery.filter():
var $items = $listItems.filter(function() {
retrun $(this).data("my-value") === "123";
});
You can add any sort of custom data attributes to your node (of course that HTML won't validate and it won't be a valid XHTML document). You can then access them using jQuery attr() function (for example).
That said it's a terrible practice and you should use a standard data- attribute, accessible for example with data() function (more details and examples in the provided link):
var theValue = $("#yourItemId").data("value");
For an attribute like:
<li id="yourItemId" data-value="1001">item1</li>
For this purposes I would recommended use jquery Data
<ul id="my-list">
<li data-value="1001">item1 </li>
<li data-value="1002">item2 </li>
<li data-value="1003">item3 </li>
<li data-value="1004">item4 <li/>
</ul>
Get second li value
$("#my-list").children().eq(2).data("value");
If you want to produce valid HTML5, you should stick to the data attributes for custom properties:
<li data-value="1001">
However, any element can have a custom attribute. In fact this has been standard in IE since version 5 (sometimes called expando properties).
I'm trying to make a Simple Nested List which will be some what similar to this Image.In the Image Main list is on Left and if there's any sublist it will appear on the right on mouse over.
the Link to what I'm trying looks like -sample at jsfiddle you can see Here the Problem I'm facing is
Q1 The Sublist is not easy navigable if you hover from list first to second and to third the whole list will disappear. behavior is not consistent may be because of design.
Q2. In My main page where I have to integrate it,
it keeps Pushing down all the element below it How can i handle it.
Q3. Right now the list is displayed like normal nested list, any help on making/showing side by side as in attached Image
for reference I'm putting the codes here too.
<ul id="ScatList" style="list-style: none inside;cursor: pointer;position: relative;margin: 0px;height:10px;">
<li><span><em>List</em></span>
<ul id="liststart" style="display: none;position:absolute;padding:2px 2px 10px 2px;top:20px;left:190px;text-align:justify" class="search-menu">
<li> <a>First</a>
<ul >
<li><a>1.1</a></li>
<li><a>1.2</a></li>
</ul>
</li>
<li> Second
<ul >
<li><a>2.1</a></li>
<li>2.2</li>
</ul>
</li>
<li> Third
<ul >
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Javscript:
jQuery('#ScatList').hover(function() {
jQuery('#liststart').show(400);
}, function() {
jQuery('#liststart').hide();
});
jQuery('#liststart >li').hover(function() {
jQuery(this).find('ul').show(400);
}, function() {
jQuery(this).find('ul').hide();
});
jQuery('#liststart >li> ul').hide();
You might find my minimalistic navigation plugin useful for this. You're free to use the code and change it to your own liking.
I am trying to formulate a selector to select a set of visible elements. Our application uses the Prototype JavaScript framework, version 1.6.0.3.
The markup I'm working with is as follows:
<ul>
<li style="display:none;">1 Hidden</li>
<li style="display:none;">2 Hidden</li>
<li style="">3 Visible</li>
<li style="display:none;">4 Hidden</li>
<li style="display:none;">5 Hidden</li>
<li style="display:none;">6 Hidden</li>
<li>7 Visible</li>
<li style="">8 Visible</li>
</ul>
As you can see, some elements may have a style attribute, but only the hidden ones contain the string "display:none;". I need to select the <li> elements that are visible, where visibility is defined as "does not contain display:none".
What I've tried to far:
var visibleItems = $$('li[style*="display:none"]'); // Yields: [ ]
var visibleItems = $$('li[style*="display"]'); // Yields: [li, li, li, li, li], but isn't specific enough
Ideas? Ideally I'd like this to be as compact as possible, but I'll take what I can get.
Yes, I know that jQuery can do this but I do not want to introduce another framework in to this application since much of it already depends on Prototype.
You can filter the items using the findAll function:
var notVisible = $$('li').findAll(function(el) { return !el.visible(); });