<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>
Related
I have some strange behaviour for the dropdown that I decided to transfer to multicolumn.
<!-- language-all: lang-html -->
<li class='dropdown'>
<a href='#ExtRep' class='dropdown-toggle' data-toggle='dropdown'>Extended reports <b class='caret'></b></a>
<ul class='dropdown-menu multi-column columns-3'>
<div class='row'>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 1</li>
<li class='divider'></li>
<li><a href='#tabl1' data-toggle='tab'>Report 1</a></li>
<li><a href='#tabl2' data-toggle='tab'>Report 2</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 2</li>
<li class='divider'></li>
<li><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
</ul>
</div>
<div class='col-sm-3'>
<ul class='multi-column-dropdown'>
<li class='disabled' disabled>Server 3</li>
<li class='divider'></li>
<li><a href='#tabl5' data-toggle='tab'>Report 5</a></li>
</ul>
</div>
</div>
</ul>
</li>
Here is the sample: https://jsfiddle.net/Meeshka/0fazzvdh/9
When selecting each line in dropdown for the first time all is working like a charm. But trying to return to report 3 or 5 I see that I can't do that. While inspecting the code I saw that although I switch to Report 1 or 2, the li element of previous report remains with class="active".
<li class='active'><a href='#tabl3' data-toggle='tab'>Report 3</a></li>
This happens only when I switch between reports in different columns.
Reports in the same drop-down column are working OK.
If I add to each column at least 2 lines, I can manage to switch but not in 100% cases, behavior is unpredictable.
Like in this example: https://jsfiddle.net/Meeshka/0fazzvdh/1/
Is the only way to make it wor correctly is to manually trigger class attribute for the element when I switch to another one?
Is it a bug at all or something I miss in the code?
So far I guess there is no "correct" solution to the bug.
If somebody wants a ready and a very straight forwarded solution, here is how I solved it:
<script type='text/javascript'>
$('a[data-toggle="tab"]').on('click', function(event) {
$(this).closest('div.row').find('li').each(function(){
//console.log($(this).attr('class'));
$(this).removeClass('active');
});
});
</script>
Here's how it looks like in fiddle:
https://jsfiddle.net/Meeshka/0fazzvdh/10/
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"]')
please help me i cant make my drop down list vertical. when I hover over a list it is horizontal.
my html code
<div id="header">
<div>
<img src="logo.png" alt="LOGO" height="115" width="115px" />
<ul id="navigation">
<li class="active">
Home
</li>
<li>
What We Offer
</li>
<li>
Solutions
<ul>
<li>
Inbound
</li>
<li>
Outbound
</li>
</ul>
</li>
<li>
About
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
css
I can't see your CSS, but did you apply display: inline to both the top-level AND sub-level menu items? This will cause the problem you describe.
The top-level li items should be display: inline, but their children should be display: block.
See this example: https://jsfiddle.net/tLqrrfy0/
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.