I want to find the answer with data-correct="1". Here is my source text:
<ul class="list-group">
<li class="list-group-item list-ques"><b>1.</b> What the capital of Bangladesh?
</li>
<li class="answer" data-qid="1" data-ans="a" data-correct="0" name="ans_4665" class="rd_ques_ans">
a. Chittagong
</li>
<li class="answer" data-qid="1" data-ans="b" data-correct="0" name="ans_4665" class="rd_ques_ans">
b.Khulna
</li>
<li class="answer" data-qid="1" data-ans="c" data-correct="0" name="ans_4665" class="rd_ques_ans">
c.Satkhira
</li>
<li class="answer" data-qid="1" data-correct="1" # name="ans_4665" class="rd_ques_ans">
d.Dhaka
</li>
</ul>
my code:
ans_block = soup.find_all('ul', attrs = {'class': 'list-group'})
my_answer = q.find('li', attrs = {'class':'answer'}).find(re.compile('data-correct="1"')).string
Its returns None instead of d.Dhaka as result.
Your answer will be appreciated.
Happy coding :)
There is no need for a regular expression. It's more convenient to search for all li tags with css class answer and the data-correct attribute with value '1':
my_answer = q.find('li', attrs = {'class':'answer', 'data-correct' : '1'}).text.strip()
I have taken your data as html and you can find li tag and give additional attrs in find method to get text
html="""<ul class="list-group">
<li class="list-group-item list-ques"><b>1.</b> What the capital of Bangladesh?
</li>
<li class="answer" data-qid="1" data-ans="a" data-correct="0" name="ans_4665" class="rd_ques_ans">
a. Chittagong
</li>
<li class="answer" data-qid="1" data-ans="b" data-correct="0" name="ans_4665" class="rd_ques_ans">
b.Khulna
</li>
<li class="answer" data-qid="1" data-ans="c" data-correct="0" name="ans_4665" class="rd_ques_ans">
c.Satkhira
</li>
<li class="answer" data-qid="1" data-correct="1" # name="ans_4665" class="rd_ques_ans">
d.Dhaka
</li>
</ul>"""
soup= BeautifulSoup(html, 'html.parser')
main=soup.find("ul",class_="list-group")
main.find("li",attrs={"class":"rd_ques_ans","data-correct":"1"}).get_text(strip=True)
Ouput:
'd.Dhaka'
Related
how do I have to configure the "Wayfinder" in MODx to get a Bootstrap 5 output. specifically for the "Dropdown Submenue".
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item active">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="#">Project</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How-To</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
I think it has to be the innerTpl and the innerRowTpl. The normal (level 1 menu) works. Just not the submenu.
How do I have to configure that?
The Wayfinder call:
[[Wayfinder? &startId=`0` &level=`2` &outerClass=`navbar-nav me-auto mb-2 mb-md-0` &rowTpl=`tpl_navigation-menu` &rowClass=`nav-item` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]
&rowTpl:
<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" class="nav-link" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
&innerTpl and innerRowTpl is still blank.
Did someone have an Idea?
Wayfinder often confusing here unfortunately, please take a look at snippet documentation diagram, it will help you to understand which chunks are used to form menu child elements.
OK,
here is the final solution. (For those who struggels with the Wayfinder-Stuff as me)
[[Wayfinder?
&startId=`0`
&level=`2`
&outerClass=`navbar-nav me-auto mb-2 mb-md-0`
&innerClass=`dropdown-menu`
&rowTpl=`tpl_row`
&parentRowTpl=`tpl_parentrow`
&innerRowTpl=`tpl_innerrow`
]]
Chunk for tpl_row:
<li class="nav-item [[+wf.classnames]]">
<a class="nav-link" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
Chunk for tpl_parentrow:
<li class="nav-item dropdown [[+wf.classnames]]">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
Chunk for tpl_innerrow:
<li class="[[+wf.classnames]]">
<a class="dropdown-item" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
I can't figure out how I have to configure Wayfinder (or pdoMenue) to get this output:
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">
<p>Home</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="articles.html">
<p>Articles</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">
<p>About</p>
</a>
</li>
</ul>
Can anybody help me out?
Edit: I have a dropdown too:
<li class="nav-item dropdown">
<a href="index.html#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
<i class="now-ui-icons files_paper" aria-hidden="true"></i>
<p>Sections</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria- labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="sections.html#headers">
<i class="now-ui-icons shopping_box"></i>
Headers
</a>
<a class="dropdown-item" href="sections.html#features">
<i class="now-ui-icons ui-2_settings-90"></i>
Features
</a>
</div>
</li>
It is the free Template Now UI-Kit, and based on bootstrap 4.
[[pdoMenu?
&parents=`0`
&level=`1`
&tplOuter=`#INLINE <ul[[+classes]]>[[+wrapper]]</ul>`
&tpl=`#INLINE <li[[+classes]]><a class="nav-link" href="[[+link]]" [[+attributes]]><p>[[+menutitle]]</p></a>[[+wrapper]]</li>`
&outerClass=`navbar-nav ml-auto`
&rowClass=`nav-link`
]]
Something like this in pdoMenu. Untested, you may have to play around with how the classes get assigned. If you need first and last classes, or a you-are-here class, those are available too and well-documented. https://docs.modx.pro/en/components/pdotools/snippets/pdomenu
I'm trying to place the icon before the text in the navigation button. However, it always appears above.
Also, the icon must be aligned vertically with the text.
This must be really easy to correct but can not figure it out.
Any feedback is highly appreciated.
What should look like:
What happens:
.nav-link {
display: inline-block;
}
<ul class="navbar-nav mx-auto w-100">
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4>Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4>Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4>Test 3</h4>
</a>
</li>
</ul>
You need to add class="d-inline" to your h4 elements like so:
<ul class="navbar-nav mx-auto w-100">
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="d-inline">Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4 class="d-inline">Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="d-inline">Test 3</h4>
</a>
</li>
</ul>
h4s (and h1s etc.) are normally block level elements that's why they wrap.
Trying to create a Bootstrap menu with WayFinder. How to finish it?
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="drop1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="drop2">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
My WayFinder call so far:
[[Wayfinder? &startId=`0` &level=`1`
&hideSubMenus=`TRUE` &includeDocs=`1,2,3,4,5,55,7,8,74`
&outerTpl=`chunk_navigation-menu`]]
And my chunk_navigation-menu looks like this:
<ul class="navbar-nav nav">[+wf.wrapper+]</ul>
First of all, I am assuming you are using MODX Evolution.
The easiest way to do that is using
&outerClass
&parentClass
&innerClass
&parentRowTpl
In your Wayfinder call.
It should look like this:
[[Wayfinder? &startId=`[(site_start)]` &level=`2` &outerClass=`nav navbar-nav` &parentClass=`dropdown` &innerClass=`dropdown-menu` &parentRowTpl=`navbar_parentRowTpl`]]
Note: If you don't use [(site_start)] in your context(s), replace it with your menu's parent resource ID.
Also in this case you would have to create the navbar_parentRowTpl. This chunk should look like this:
<li[+wf.id+][+wf.classes+] class="dropdown" id="menu[+id+]">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#menu[+id+]" href="[+wf.link+]" title="[+wf.title+]">
[+wf.linktext+]
<b class="caret"></b>
</a>
[+wf.wrapper+]</li>
As it's been a long time I don't work with Evo, if there is some problem with this code let me know and I can help you.
I used this example as reference: https://gist.github.com/mkay/f0afc97ec1536932e0a3
And used this table to convert to the Evo syntax:
https://rtfm.modx.com/revolution/2.x/making-sites-with-modx/tag-syntax
<div class="nav nav_main">
<ul class="level-1">
<li class="level-1 norm uid_2"><a class="level-1 norm" href="company/at-a-glance/"><span>Company</span></a>
<div class="level-2-wrapper-outer">
<div class="level-2-wrapper">
<div class="level-2-wrapper-inner">
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="company/at-a-glance/"><span>At a glance</span></a>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="company/culture-and-values/"><span>Culture and values</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="company/culture-and-values/#c24">History</a>
</li>
<li class="level-3 norm"><a class="level-3 norm" href="company/culture-and-values/#c25">Corporate culture</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="company/uhlmann-worldwide/"><span>Uhlmann worldwide</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="company/uhlmann-worldwide/#c231">Germany</a>
</li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="company/uhlmann-group/"><span>Uhlmann Group</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="company/uhlmann-group/#c29">visiotec</a>
</li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" target="_blank" href="company/lieferanten-portal/"><span>Lieferanten-Portal</span></a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="level-1 norm uid_3"><a class="level-1 norm" href="solutions/capsules-tablets/"><span>Solutions</span></a>
<div class="level-2-wrapper-outer">
<div class="level-2-wrapper">
<div class="level-2-wrapper-inner">
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="solutions/capsules-tablets/"><span>Capsules, tablets</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/capsules-tablets/#c40">Blister machines</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/vials-ampoules-syringes/"><span>Vials, ampoules, syringes</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/vials-ampoules-syringes/#c64">Blister machines</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/blister-bottles/"><span>Blister, bottles</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/blister-bottles/#c75">Cartoners</a>
</li>
<li class="level-3 norm"><a class="level-3 norm" href="solutions/blister-bottles/#c76">Stretch-banding machines</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/cartons-cases/"><span>Cartons, cases</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/cartons-cases/#c83">Stretch-banding machines</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/automation-and-software/"><span>Automation and software</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/automation-and-software/#c94">PDA & SCADA</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="solutions/inspection-systems/"><span>Inspection systems</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="solutions/inspection-systems/#c98">BottleChrom</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="level-1 norm uid_4"><a class="level-1 norm" href="products/blister-machines/"><span>Products</span></a>
<div class="level-2-wrapper-outer">
<div class="level-2-wrapper">
<div class="level-2-wrapper-inner">
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="products/blister-machines/"><span>Blister machines</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/blister-machines/#c109">Blister machine B 1240</a></li>
</li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/cartoners/"><span>Cartoners</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/cartoners/#c123">Cartoner C 130</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/blister-lines/"><span>Blister lines</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/blister-lines/#c130">Blister line BEC 300</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/end-of-line-packaging-machines/"><span>End-of-line packaging machines</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/end-of-line-packaging-machines/#c133">Stretch-banding machines</a></li>
</li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/bottle-lines/"><span>Bottle lines</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/bottle-lines/#c144">Bottle line IBC 120</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/feeders/"><span>Feeders</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/feeders/#c148">For solid dose products</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="products/competences/"><span>Competences</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="products/competences/#c158">Containment</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="level-1 norm uid_5"><a class="level-1 norm" href="services/advice/"><span>Services</span></a>
<div class="level-2-wrapper-outer">
<div class="level-2-wrapper">
<div class="level-2-wrapper-inner">
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="services/advice/"><span>Advice</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/advice/#c170">Quote and order management</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/support/"><span>Support</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/support/#c174">Telephone support</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/on-site-services/"><span>On-Site Services</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/on-site-services/#c177">Response time</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/spare-parts/"><span>Spare parts</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/spare-parts/#c180">Spare parts availability</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/format-parts/"><span>Format parts</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/format-parts/#c184">Format and tool sets</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/upgrades-and-rebuilds/"><span>Upgrades and rebuilds</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/upgrades-and-rebuilds/#c186">Electrical upgrades</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/automation-and-software/"><span>Automation and software</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/automation-and-software/#c191">PDA & SCADA</a></li>
</ul>
</li>
</ul>
<ul class="level-2">
<li class="level-2 norm"><a class="level-2 norm" href="services/training/"><span>Training</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/training/#c194">Operator training</a></li>
</ul>
</li>
<li class="level-2 norm"><a class="level-2 norm" href="services/validation-and-calibration/"><span>Validation and calibration</span></a>
<ul class="level-3">
<li class="level-3 norm"><a class="level-3 norm" href="services/validation-and-calibration/#c198">Validation of new machines</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Based on question Menu: wrap every X item, how can I wrap every x element if I don´t know the exact count of menu elements?
If I use the answer of chrisBerlin the problem is that it only works with e.g. 3 elements.
But with a dynamic count of child's per parent it outputs a not valid code.
How can I solve this? My code shows 3 levels of a HMENU. I need the x-wrap in level 2. I use 7 elements per row.
On my page the first element has e.g. 5 child´s. So the <ul class="level-2"> didn´t get closed.
tmp.nav_main = COA
tmp.nav_main{
10 = COA
10{
10 = HMENU
10{
wrap = <ul class="level-1">|</ul>
entryLevel = {$t3d_navigation.nav_main_entryLevel}
excludeUidList = {$t3d_navigation.nav_main_excludeUidList}
1 = TMENU
1 {
IProcFunc = user_tmenulinebreak->main
expAll = 1
NO{
wrapItemAndSub = <li class="level-1 norm uid_{field:uid}">|</li>
wrapItemAndSub.insertData = 1
ATagParams = class="level-1 norm"
stdWrap.wrap = <span>|</span>
}
CUR < .NO
CUR.wrapItemAndSub = <li class="level-1 click uid_{field:uid}">|</li>
CUR.wrapItemAndSub.insertData = 1
CUR.ATagParams = class="level-1 click"
CUR = 1
ACT < .CUR
ACT = 1
}
2 < .1
2 {
wrap = <div class="level-2-wrapper-outer"><div class="level-2-wrapper"><div class="level-2-wrapper-inner">|</div></div></div>
expAll = 1
NO{
wrapItemAndSub = |*|<ul class="level-2"><li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li></ul>|*|
ATagParams = class="level-2 norm"
}
CUR.wrapItemAndSub = |*|<ul class="level-2"><li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li></ul>|*|
CUR.ATagParams = class="level-2 click"
ACT < .CUR
ACT = 1
}
3 < .1
3 {
wrap = <ul class="level-3">|</ul>
expAll = 1
NO{
wrapItemAndSub = <li class="level-3 norm">|</li>
doNotShowLink = 1
after{
cObject = TEXT
cObject{
typolink{
parameter = {field:pid}#{field:uid}
parameter.insertData = 1
ATagParams = class="level-3 norm"
}
data = field:title
}
}
}
CUR{
wrapItemAndSub = <li class="level-3 click">|</li>
doNotShowLink = 1
after{
cObject = TEXT
cObject {
typolink{
parameter = {field:pid}#{field:uid}
parameter.insertData = 1
ATagParams = class="level-3 click"
}
data = field:title
}
}
}
ACT < .CUR
ACT = 1
}
}
}
}
In my special case I need 1-7 items in a <ul class="level-2"></ul> an if there are more than 7 a new row must start with the next 8-14 elements. If there are more than 14 a new row.
Read the docs it gives a lot of clues, the valid syntax for optionSplit is:
first-element(s) |*| middle-element(s) |*| last-element(s)
The priority is last, first, middle, which means that only last segment will be used if you have one item,
if there will be two items it will be order first, last
and if you'll have 3 or more items there will be first, middle(s), last
each segment can have numbered subsegments divided by ||.
You are using numbered subsegments only in the middle part, you need to fix it.
Other thing is that the optionSplit MUST be valid in all situations, when there's only 1, 2 or 3+ items available, the way you used it causes that there are situations when ul is unclosed in other words you need the correct statement on each part or subpart of the optionSplit...
Anyway, optionSplit is nice but tricky technique, it was invented many years ago to add possibility for style manipulation by some factor when there was no any reliable JS library, currently I would use jQuery and/or new CSS features for doing this, just generate plain menu and then add required classes to every-x element. ie.:
Like this using jQuery
Like this using CSS