if i was coding like as below...
how do i get the currennt LI index ??
JSP
<c:forEach var="list" items="${list}">
<ul id="bbs">
<li><a>item1</a></li>
<li class="tmpClick"><a>item2</a></li>
<li><a>item3</a></li>
</ul>
</foreach>
<script type="text/javascript">
<!--
jq('.tmpClick').click(function() {
console.log( "log " +jq(this).index() ) ;
});
//-->
</script>
Ex)
- HTML TAG
<ul id="bbs">
<li><a>item1</a></li>
<li class="tmpClick"><a>item2</a></li>
<li><a>item3</a></li>
</ul>
<ul id="bbs">
<li><a>item1</a></li>
<li class="tmpClick"><a>item2</a></li>
<li><a>item3</a></li>
</ul>
<ul id="bbs">
<li><a>item1</a></li>
<li class="tmpClick"><a>item2</a></li>
<li><a>item3</a></li>
</ul>
<ul id="bbs">
<li><a>item1</a></li>
<li class="tmpClick"><a>item2</a></li>
<li><a>item3</a></li>
</ul>
.
.
.
.
RESULT
IDX | TITLE | RECOMMEND
1 item1 1
2 item2 2
3 item3 3
4 item4 4
.
.
.
firefox log
log 1
You want to use the status variable.
<c:forEach var="foo" items="${list}" varStatus="status">
<option value="${status.count}"></option>
</c:forEach>
To clarify:
${status.index} starts counting at 0
${status.count} starts counting at 1
Related
please, how can I create a filter with Uikit that filters multiple items at the same time, without excluding the other.
I mean, I'm creating a list of games and I need that when someone selects PS4 and then ADVENTURE, I want the PS4 filter to continue while now only the PS4 adventure games appears.
<div class="uk-grid-small uk-grid-divider uk-child-width-auto" uk-grid>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li class="uk-active" uk-filter-control>All</li>
</ul>
</div>
<div>
<ul class="uk-subnav uk-subnav-pill" uk-margin>
<li uk-filter-control="[data-game='adventure']">White</li>
<li uk-filter-control="[data-console='ps4']">Blue</li>
</ul>
</div>
<div>
</div>
</div>
<ul class="js-filter uk-child-width-1-2 uk-child-width-1-3#m uk-text-center" uk-grid="masonry: true">
<li data-color="white" data-size="large">
<div data-game="xbox" >
<canvas width="600" height="800"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-game="adventure">
<div class="uk-card uk-card-primary uk-card-body">
<canvas width="600" height="400"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
<li data-game="adventure" data-console="ps4">
<div class="uk-card uk-card-default uk-card-body">
<canvas width="600" height="600"></canvas>
<div class="uk-position-center">Item</div>
</div>
</li>
</ul>
Could help? thanks
simply use groups, like this
<li uk-filter-control="filter: .thing;group: 1" id="tagy" class="">thing</li>
if you are using php for this you can do some foreach loop
$num = 1;
foreach(array_unique($alltags) as $key => $tag) {
echo"<li uk-filter-control='filter: .$tag;group: $num'><a href='#'>$tag</a></li>";
$num++;
}
this works really well, you can select multiple tags, but dont forget to add clearing button i have it like this
<li class='uk-active' uk-filter-control><a href='#'>Reset</a></li>";
I have the following html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scrapy</title>
</head>
<body>
<table style="border: #ffffff 0px solid" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<div style="margin-top:7px;margin-bottom:7px;font-size:16px;font-weight:bold;font-color:white" width="100%">
Scrapy Rocks
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="margin-top:25px">
<tr>
<td align="left" valign="top"></td>
<td valign="top">
<font size="-1">
<div style="margin-right:10; margin-top:5; text-align: right">
AAA |
BBB |
CCC
</div>
</font>
</td>
</tr>
<tr>
<td align="left" valign="top">
<div>
<a href="http://example.com" target="_blank">
<img src="/images/a.jpg" border="0" vspace="0" width="100" height="100" valign="middle"/>
</a>
<a href="/index.html">
<img src="/images/aaa.gif" border="0" vspace="0" width="100" height="100" valign="middle"/>
</a>
</div>
</td>
<td valign="top">
<div style="margin-right:10; margin-top:5; text-align: right"></div>
</td>
</tr>
</table>
<hr size=1>
<h2 style="margin-top: 36px; margin-bottom: 24px">
Abcd efgh for 2017
</h2>
Part 1 |
Part 2 |
Part 3 |
Part 4 |
A very bold title
<hr size="1" style="margin-top: 36px; margin-bottom: 24px">
<a name="part1"></a>
<h3>Part 1</h3>
<ul>
</ul>
<a name="part2"></a>
<h3>Part 2</h3>
<ul>
</ul>
<a name="part3"></a>
<h3>Part 3</h3>
<ul>
</ul>
<a name="part4"></a>
<h3>Part 4</h3>
<ul>
</ul>
<div style="margin-top: 36px; margin-bottom: 24px">
<a name="non_rep"></a>
<h3>Abcd efgh</h3>
</div>
<b>January 2017</b>
<ul>
<li>
<b>Part1 1</b>
</li>
<ul>
<li>
Title 1
</li>
<br>
<li>
Title 2
</li>
<br>
</ul>
<li>
<b>Part1 2</b>
</li>
<ul>
<li>
Title A
</li>
<br>
<li>
Title B
</li>
<br>
</ul>
<li>
<b>Part1 3</b>
</li>
<ul>
<li>
Some text 1
</li>
<br>
<li>
Some Text 2
</li>
</ul>
</ul>
<b>February 2017</b>
<ul>
<li>
<b>Part1 1</b>
</li>
<ul>
<li>
Title 1
</li>
<br>
<li>
Title 2
</li>
<br>
</ul>
<li>
<b>Part1 2</b>
</li>
<ul>
<li>
Title A
</li>
<br>
<li>
Title B
</li>
<br>
</ul>
<li>
<b>Part1 3</b>
</li>
<ul>
<li>
Some text 1
</li>
<br>
<li>
Some Text 2
</li>
</ul>
</ul>
<b>March 2017</b>
<ul>
<li>
<b>Part1 1</b>
</li>
<ul>
<li>
Title 1
</li>
<br>
<li>
Title 2
</li>
<br>
</ul>
<li>
<b>Part1 2</b>
</li>
<ul>
<li>
Title A
</li>
<br>
<li>
Title B
</li>
<br>
</ul>
<li>
<b>Part1 3</b>
</li>
<ul>
<li>
Some text 1
</li>
<br>
<li>
Some Text 2
</li>
</ul>
</ul>
</body>
</html>
What i need here is to extract the text between the body tags (using Scrapy xpath) but I don't want the tables text at all.
What I tried to get all the text was:
def parse(self, response):
"""
-*-
"""
item = DummyItem()
title = response.xpath('//title/text()').extract()
body = "\n ".join(
response.xpath(
'//body//*[not(self::script or self::style)]/text()'
).extract()
)
item['title'] = title
item['body'] = body
yield item
Whit the above stanza, I managed to extract all the text, tables inclusive, which I don't want.
Then I replaced the "body" with:
body = "\n ".join(
response.xpath(
'//body//*[not(self::table or self::script or self::style)]/text()'
).extract()
)
It didn't do the job. Still extracting the tables text.
Any ideas on how to tackle it?
You want "all text nodes that are not in a <table>", or "all text nodes that do not have a <table> ancestor".
That's /html/body//text()[not(ancestor::table)] in XPath.
text_nodes = response.xpath("/html/body//text()[not(ancestor::table)]").extract()
now you only need to strip whitespace from the resulting items and remove empty strings from the list.
body = "\n ".join(filter(None, map(str.strip, text_nodes)))
Scrapy is really powerful tool but sometimes it’s frustrating when it comes to XPath.
From the following html, I want to extract the links and the link texts (Title 1, Title 2 etc.) between <b>January 2017</b> and <b>February 2017</b> and group them per “Part”.
The actual html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scrapy</title>
</head>
<body>
<hr size=1>
<h2 style="margin-top: 36px; margin-bottom: 24px">
Abcd efgh for 2017
</h2>
Part 1 |
Part 2 |
Part 3 |
Part 4 |
A very bold title
<hr size="1" style="margin-top: 36px; margin-bottom: 24px">
<a name="part1"></a>
<h3>Part 1</h3>
<ul>
</ul>
<a name="part2"></a>
<h3>Part 2</h3>
<ul>
</ul>
<a name="part3"></a>
<h3>Part 3</h3>
<ul>
</ul>
<a name="part4"></a>
<h3>Part 4</h3>
<ul>
</ul>
<div style="margin-top: 36px; margin-bottom: 24px">
<a name="non_rep"></a>
<h3>Abcd efgh</h3>
</div>
<b>January 2017</b>
<ul>
<li>
<b>Part1 1</b>
</li>
<ul>
<li>
Title 1
</li>
<br>
<li>
Title 2
</li>
<br>
</ul>
<li>
<b>Part1 2</b>
</li>
<ul>
<li>
Title A
</li>
<br>
<li>
Title B
</li>
<br>
</ul>
<li>
<b>Part1 3</b>
</li>
<ul>
<li>
Some text 1
</li>
<br>
<li>
Some Text 2
</li>
</ul>
</ul>
<b>February 2017</b>
<ul>
<li>
<b>Part1 1</b>
</li>
<ul>
<li>
Title 1
</li>
<br>
<li>
Title 2
</li>
<br>
</ul>
<li>
<b>Part1 2</b>
</li>
<ul>
<li>
Title A
</li>
<br>
<li>
Title B
</li>
<br>
</ul>
<li>
<b>Part1 3</b>
</li>
<ul>
<li>
Some text 1
</li>
<br>
<li>
Some Text 2
</li>
</ul>
</ul>
<b>March 2017</b>
<ul>
<li>
<b>Part1 1</b>
</li>
<ul>
<li>
Title 1
</li>
<br>
<li>
Title 2
</li>
<br>
</ul>
<li>
<b>Part1 2</b>
</li>
<ul>
<li>
Title A
</li>
<br>
<li>
Title B
</li>
<br>
</ul>
<li>
<b>Part1 3</b>
</li>
<ul>
<li>
Some text 1
</li>
<br>
<li>
Some Text 2
</li>
</ul>
</ul>
<b>April 2017</b>
...
...
So on so forth
</body>
</html>
The result should be:
January 2017
Part1 1
Title: Title 1, link: /cgi-bin/o.pl?file=/a/1.htm
Title: Title 1, link: /cgi-bin/o.pl?file=/a/1.htm
Part1 2
Title: Title 1, link: /cgi-bin/o.pl?file=/a/2.htm
Title: Title 1, link: /cgi-bin/o.pl?file=/a/22.htm
Part1 3
Title: Title 1, link: /cgi-bin/o.pl?file=/a/3.htm
Title: Title 1, link: /cgi-bin/o.pl?file=/a/33.htm
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
February 2017
Part1 1
Title: Title 1, link: /cgi-bin/o.pl?file=/b/1.htm
Title: Title 1, link: /cgi-bin/o.pl?file=/b/1.htm
Part1 2
Title: Title 1, link: /cgi-bin/o.pl?file=/b/2.htm
Title: Title 1, link: /cgi-bin/o.pl?file=/b/22.htm
Part1 3
Title: Title 1, link: /cgi-bin/o.pl?file=/b/3.htm
Title: Title 1, link: /cgi-bin/o.pl?file=/b/33.htm
I tried //text()[following-sibling::b/text()='January 2017']/following::a[contains(#href, 'cgi-bin')]/text() and similar spells to no avail.
How should I approach?
The whole setup is a bit nasty because the tree structure is very flat. However we can see that it follows this pattern: <b> node with text with <ul> right below it with data.
So we can find all we want with some loops and following-sibling::ul[1] xpath.
It's a bit ugly because of triple loops but if you ignore that it's pretty simple:
# any <b> node that contains 201x (a year)
nodes = response.xpath("//b[re:test(text(),'201\d')]")
for node in nodes:
# get date node data
name = node.xpath('text()').extract_first()
parts = node.xpath('following-sibling::ul[1]//li/b')
for part in parts:
# the same with part node data
part_name = part.xpath('text()').extract_first()
links = part.xpath("../following-sibling::ul[1]//a")
for link in links:
# finally, we have date, part and link data! Put it together.
item = dict()
item['date_name'] = name
item['part_name'] = part_name
item['link_name'] = link.xpath('text()').extract_first()
item['link_url'] = link.xpath('#href').extract_first()
yield item
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>
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.