What is the Xpath to select the first element of this jquery selector: $('.A .B:eq(1)') ?
HTML Sample
<div class="x A z">
<div class="y">
<div class="r B z"></div> <---- that is that I need to select
<div class="r B z"></div
>
...
So far I've tried this:
(//div[(#class='A') and div[contains(concat(' ', #class, ' '), 'B')]])[1]
//div[contains(concat(' ',#class,' '), ' A ')]//div[contains(concat(' ',#class,' '), ' B ')][1]
Related
I am facing a strange problem.
I use VueTableDynamic as a table library (https://github.com/TheoXiong/vue-table-dynamic)
The whole implementation is correct but there is a small problem... I have certain columns that I want to render with html (for example I want to put a download icon with an href)
this.invoices_params.data.push([
invoice.invoice_number,
invoice.user.company_name ? invoice.user.company_name : invoice.user.first_name + ' ' + invoice.user.last_name,
invoice.total,
(119 / 100) * invoice.total,
invoice.media.length > 0 ?
`<a href=${invoice.media[0].original_url}>Download invoice</a>` :
'No invoice',
moment(invoice.created_at).format('DD-MM-YYYY H:m:s'),
]);
<div class="col-lg" v-if="checkbox_invoices">
{{ trans.invoices.title }}
<vue-table-dynamic :params="invoices_params"></vue-table-dynamic>
</div>
But I can't render that html code and I don't think I can use v-html either
Is there just a way to put that icon there?
I tried to put automatic html code but in vain.
The library allows you to customize the content of a cell using slots: https://github.com/TheoXiong/vue-table-dynamic#slot
Example:
<template>
<vue-table-dynamic :params="params">
<template v-slot:column-5="{ props }">
<a v-if="props.cellData" href=${props.cellData}>Download invoice</a>
<span v-else>No invoice</span>
</template>
</vue-table-dynamic>
</template>
<script>
[...]
this.invoices_params.data.push([
invoice.invoice_number,
invoice.user.company_name ? invoice.user.company_name : invoice.user.first_name + ' ' + invoice.user.last_name,
invoice.total,
(119 / 100) * invoice.total,
invoice.media.length > 0 ? invoice.media[0].original_url : null,
moment(invoice.created_at).format('DD-MM-YYYY H:m:s'),
]);
</script>
I need to find tags after a specific item on a website. So, is there a way to skip the tag objects until this specific one, then find the matching ones to given criteria? I need all p with class XYZ after the div with class ABC.
response = requests.get(url).text
soup = BeautifulSoup(response)
items = soup.find_all('p', {'class': 'MessageTextSize js-message-text message-text'}) # only return the ones after the div with class of "Text 2"
Edit: You can see a sample code block below which is part response. The aim is finding the last two paragraphs (Text 3 & Text 4) despite the first one (Text 1) also has the same p class with them. So, I need to look for the parameter of find_all function after the Text 2 (class MessageTextSize js-message-text message-text).
<div class="js-message-text-container">
<p class="MessageTextSize js-message-text message-text" data-aria-label-part="0">Text 1</p>
</div>
<div class="js-message-text-container">
<p class="MessageTextSize MessageTextSize--jumbo js-message-text message-text" data-aria-label-part="0">Text 2</p>
</div>
<div class="js-message-text-container">
<p class="MessageTextSize js-message-text message-text" data-aria-label-part="0">Text 3</p>
</div>
<div class="js-message-text-container">
<p class="MessageTextSize js-message-text message-text" data-aria-label-part="0">Text 4</p>
</div>
p.s. bs4 version is 4.8.1, which is the latest release.
You can always use a custom function (or a lambda expression) inside find_all. The following is self-explanatory (IMO).
result = soup.find_all(
lambda x: x.name == 'p' and
'XYZ' in x.get('class', '') and
x.find_previous('div', class_='ABC')
)
Example
from bs4 import BeautifulSoup
html = """
<p class="XYZ">Text 1</p>
<p class="XYZ">Text 2</p>
<div class="ABC"></div>
<p class="XYZ">Text 3</p>
<p class="XYZ">Text 4</p>
"""
soup = BeautifulSoup(html, 'html.parser')
result = soup.find_all(
lambda x: x.name == 'p' and
'XYZ' in x.get('class', '') and
x.find_previous('div', class_='ABC')
)
print(result)
Output
[<p class="XYZ">Text 3</p>, <p class="XYZ">Text 4</p>]
EDIT
MessageTextSize js-message-text message-text represents three classes, not one.
x.get('class', '') returns a list of classes -
['MessageTextSize', 'js-message-text', 'message-text']
In your particular case, you have to target a p tag not a div, if I understood correctly.
So, you have to use
result = soup.find_all(
lambda x: x.name == 'p' and
'MessageTextSize js-message-text message-text' in ' '.join(x.get('class', ''))
and x.find_previous('p', class_='MessageTextSize MessageTextSize--jumbo js-message-text message-text')
)
Ref:
find_previous()
Function as filter
If I understand you correctly, this should work:
item = soup.select_one('p[class*="MessageTextSize--jumbo"]')
sibs = item.parent.find_next_siblings()
for sib in sibs:
print(sib.text.strip())
Output:
Text 3
Text 4
I am trying to get a conpose view going in a InlineViewStrategy.
The simple , "hard coded" table view in a custom template works in the context of a higher level div tag ("x_content") as represented in the Vendor Spend for Maintain below passed into InlineViewStrategy
' <table class="" style="width:100%">',
' <tr>',
' <th style="width:37%;">',
' <p>Top 5</p>',
' </th>',
' <th>',
' <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">',
' <p class="">Vendor</p>',
' </div>',
' <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">',
' <p class="">Progress</p>',
' </div>',
' </th>',
' </tr>',
' <tr>',
' <td>',
' <canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>',
' </td>',
' <td>',
' <table class="tile_info">',
' <tr>',
' <td>',
' <p><i class="fa fa-square blue"></i>Vendor 1 </p>',
' </td>',
' <td>30%</td>',
' </tr>',
' </table>',
' </td>',
' </tr>',
' </table>',
If I try to put the same content (verbatim wrapped with a template) in an html file (ie. test-view.html) and do a compose on test-view.html replacing the HTML with compose AND PASSING THAT to InLoneViewStrategy, I get a a blank screen
<compose view="./test-view.html"> </compose>
I get on the console, "Unhandled rejection Error: Load timeout for modules: template-registry-entry!test-view.html,text!test-view.html". Is there somewhere else that I should be putting this test-view.html? Or am I missing something?
to be more specific
[
' ... '
' <div class="x_content"> ',
' HTMLTABLE STUFF ',
' </div> '
' ... ].join( " ")
get replaced by
[
' ... '
' <div class="x_content"> ',
' <compose view="./test-view.html"> </compose>',
' </div> '
' ... ].join( " ")
in custom template which is then passed to InlineViewStrategy
Thanks, in advance your help.
test-view.html has to be in the relevant directory... in this case , at src level
is there a way to navigate to another form using HTML ?
for example, a link in side my innerHTML
Form2
it is just HTML i was hardcoding into the innerHTML property of a TW3ScrollControl. Some of the HTML is static, some is dynamic data (e.g. question & answer) I get from my JSON file
for example
Who is the president of the United States?
Hillary Clinton
Bernie Sanders
Joseph Biden
Donald Trump
so, giving something like this off the top of my head, how would on do a GotoForm if one of these names were clicked?
<div>
<p>Who is the president of the United States?</p>
<br>
<center>
Hillary Clinton <br>
<A href=""> Bernie Sanders </A<br>
<A href=""> Joseph Biden </A<br>
<A href=""> Donald Trump </A<br>
</center>
</div>
thanx
with a little help from facebook friend :) I was able to come up with the following
var i: integer;
IdStr: String;
begin
fQuestion.content.InnerHTML:= '<div style="text-align: center; position: relative;">' +
'<br><center><p>' + fQuestions.questions[fIndex].question + '</p></center><br>' +
'<center>' +
'<A id="answer1" href="">' + fQuestions.questions[fIndex].answers[0] + '</A><br>' +
'<A id="answer2" href="">' + fQuestions.questions[fIndex].answers[1] + '</A><br>' +
'<A id="answer3" href="">' + fQuestions.questions[fIndex].answers[2] + '</A><br>' +
'<A id="answer4" href="">' + fQuestions.questions[fIndex].answers[3] + '</A><br>' +
'</center>' +
'</div>';
for i:= 1 to 4 do
begin
IdStr:= 'answer' + intToStr(i);
var h:= BrowserAPI.Document.getElementById(idStr);
if (h) then
begin
h.onclick := procedure (ev: variant)
begin
//do something here
end;
end;
end;
end;
I am using Bootstrap 3 media objects and I have this code here dynamically I want to have 4 columns in one row,but the problem is that the last row will have spaces inbetween to the second row.
here is my code.
//content.php
for(var i=0;i<12;i++){
mymdedia+=
'<div class="media col-sm-3">'+
'<div class="media-left">'+
'<a href="#">'+
'<img src=".....">'+
'</a>'+
'</div>'+
'<div class="media-body">'+
'<h4 class="media-heading">'John Doe'</h4>'+
'<p>Live: '+data[i].address+'</p>'+
'</div>'+
'</div>';
}
$('#mycontainer').append(mymdedia);
//index.php
<div class="someclass">
<div class="row" id="mycontainer">
</div>
</div>
and this is the result looks like
I believe you are placing all the media objects in one row ... and they don't fit.
In every row that you've opened ( <div class='row'>...</div> ) you can place only 4 <div class='media col-sm-3'></div> ... because each col size = 3 ... ( 4x3 = 12 )
So in the for loop, after each 4 media objects - you should close the current row div and create a new <div class='row'> ...
See plunker: http://plnkr.co/edit/BJa3qdbKcYMDwhW809gp?p=preview
Right after the for loop:
for(var i=0;i<12;i++){
if ( i && i % 4 == 0 )
mymdedia += '</div><div class="row">'; // close row and create a new one
... your original code ...
}
mymdedia += '</div>' // close the last row outside the for loop ...