I'm looking for a solution on how to use addClass for every 4 LI element, like this:
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li class="newclass">Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
<li>Element 8</li>
<li class="newclass">Element 8</li>
</ul>
two ways.
CSS selector: http://jsfiddle.net/at9CJ/1/
document.getElements('ul > li:nth-child(4n+4)').addClass('new');
mod children:
document.getElements('ul > li').each(function(el, i){
(i+1) % 4 === 0 && el.addClass('new');
});
Related
<ul class = "items">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
What is wrong with following code, unit test is failing?
<script>
d3.select('li:nth-child(2n)').html('Hello World').style('color', 'Blue').classed('big', true);
</script>
As Hubert Grzeskowiak said your code is working fine. Just follow the order in which you are trying to manipulate
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<ul class = "items">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
<script>
d3.select('li:nth-child(2n)').html('Hello World').style('color', 'Blue').classed('big', true);
</script>
Your code should be like this, if you want to update the 3rd li item.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<ul class = "items">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>
<script>
d3.select('li:nth-child(3)').html('Hello World').style('color', 'blue').classed('big', true);
</script>
I want to show the ul class of li which is clicked.
My html is:
<ul id="level1" class="category">
<li class="level1 inactive">
abc
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
<li class="level1 inactive">
xyz
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
<li class="level1 inactive">
bcd
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
</ul>
the js which I use to show the ul is below:
<script>
var $j = jQuery.noConflict();
$j(function() {
$j('li.level1').click(function() {
$j(this).addClass("current").removeClass("inactive");
$j('ul#level2:visible').hide();
$j('ul#level2').toggle();
});
});
</script>
css:
ul.category li.level1.current a{background:url("../images/left_menu_new.png") no-repeat scroll 10px -285px transparent;}
.active{display:block;}
When I click the li.level1 current class design is added to every li of level1 , ul inside the selected li is opened and as it has anchor tag the page is redirected to the url inside the anchor tag .
What I want is when I click the li the current class should be added only to the selected li & the page of respective url in the anchor tag should be opened and ul of selected li should be opened there.
Kindly guide me to resolve this issue.
For you to achieve this, you will have to take advantage of location hash.
Do the following :
On your anchor tags, that toggle your ul, add href to a dummy unique value. Make sure the value is same as the id of the li you are in.
<ul class="level0">
<li class="level1" id="li1">
Toggle.1
<ul class="level1" style="display:none;">
When ever page loads, read window location hash.
var li = window.location.hash;
If hash is found, show the related ul.
if(li!=""){
$(li + " ul").show();
}
This way you will be able to show the last opened ul by the user.
$(function() {
var li = window.location.hash;
if (li != "") {
$(li + " ul").show();
}
$('li.level1 a').click(function() {
$(this).parent().siblings().each(function() {
$(this).find("ul.level1").hide();
});
$(this).siblings("ul.level1").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="level0">
<li class="level1" id="li1">
Toggle.1
<ul class="level1" style="display:none;">
<li class="level2">Level2.1
</li>
<li class="level2">Level2.1
</li>
<li class="level2">Level2.1
</li>
</ul>
</li>
<li class="level1" id="li2">
Toggle.2
<ul class="level1" style="display:none;">
<li class="level2">Level2.2
</li>
<li class="level2">Level2.2
</li>
<li class="level2">Level2.2
</li>
</ul>
</li>
<li class="level1" id="li3">
Toggle.3
<ul class="level1" style="display:none;">
<li class="level2">Level2.3
</li>
<li class="level2">Level2.3
</li>
<li class="level2">Level2.3
</li>
</ul>
</li>
</ul>
How can I get child element of a dropdown using nightwatch js. here is my code
<ul id="ddEmp" class="ng-scope">
<li class="ng-scope active">Emp 1</li>
<li class="ng-scope">Emp 2</li>
<li class="ng-scope">Emp 3</li>
</ul>
I want to get "Emp 3".
you can use the nth-child() css selector. In your case it would be ul#ddEmp li:nth-child(3)
You can also use xpath and look for the text in the li:
.useXpath().click('//li[text()="Emp 3"]')
Let's say I have a basic static HTML page that contains a nested unordered list:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub-item 2.1</li>
<li>Sub-item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
That's valid XHTML. Great.
Now, I'm applying Thymeleaf's internationalization via th:text (if it matters, and I don't believe it does, this is inside a Spring application).
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li th:text="#{mypage.item2}">Item 2
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
</li>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
Assuming that I have my mypage.properties set up and working properly, once the above is processed by Thymeleaf, the result will display as:
<ul>
<li>Item 1</li>
<li>Item 2
</li>
<li>Item 3</li>
</ul>
Where did my sub-items go for Item 2, and how can I get them back while having them i18n'ed separately? I know about th:utext, but I do not want to have mypage.item2 contain the full HTML for the entire sublist. Is it possible?
Edit: It is possible to get what I'm looking for if I change my code to the following, but then it is no longer valid XHTML. I am looking for a valid XHTML solution.
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li th:text="#{mypage.item2}">Item 2</li>
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
First for understanding: th:text change everything till the tag is closed, so the behavior is not a surprise.
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li><span th:text="#{mypage.item2}" th:remove="tag">Item 2</span>
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
</li>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
should work or with newer version you could use th:block
<ul>
<li th:text="#{mypage.item1}">Item 1</li>
<li><th:block th:text="#{mypage.item2}">Item 2</th:block>
<ul>
<li th:text="#{mypage.item2.1}">Sub-item 2.1</li>
<li th:text="#{mypage.item2.2}">Sub-item 2.2</li>
</ul>
</li>
<li th:text="#{mypage.item3}">Item 3</li>
</ul>
With th:inline it should be possible to avoid the extra node th:block.
I could not figure out how does the follow ajax work, (from http://jqueryui.com/demos/tabs/ajax.html )
<li class="ui-state-default ui-corner-top">Tab 1
</li>
<li class="ui-state-default ui-corner-top">Tab 2
</li>
<li class="ui-state-default ui-corner-top">Tab 3(slow)
</li>
<li class="ui-state-default ui-corner-top">Tab 4(broken)
</li>
.....
<div id="ui-tabs-1"
class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="ui-tabs-2"
class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
when click for example Tab 2, to go to "http://jqueryui.com/demos/tabs/ajax.html#ui-tabs-2", that is an empty div, so how did the background code(e.g. PHP) did to get #ui-tabs-2 and return http://jqueryui.com/demos/tabs/ajax/content2.html
thanks
The code snippet you added does not comply with the sample page at http://jqueryui.com/demos/tabs/ajax.html
It should look something like:
<div id="tabs">
<ul>
<li>Preloaded</li>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3 (slow)</li>
<li>Tab 4 (broken)</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo...</p>
</div>
</div>
First tab is not an ajax tab. Other tabs are dynamically loaded through ajax. href determines target content for ajax fetch.