My problem is that I have multiple span tags within a p tag.
I want only the HTML code within the innermost span tag.
Ex:
<span>
<span>
<span>
<span> <strong> lkfghsij</strong> hi how are u?
</span>
</span>
</span>
</span>
Here I want only the strong tag and the text after it to be written into a file.
How do I go about this? Regards.
solved...it was pretty simple...just add:
select().last().html();
Related
<p>Dostępne: </p><p style={{color:'green'}}>{props.ile_aktywne}</p><p>Niedostępne: </p><p style={{color:'red'}}>{props.ile_nieaktywne}</p>
I want it to format as two lines
"Dostępne: 1"
"Niedostępne: 2"
Don't use a paragraph if you don't want to use it. That's what a <span> or <div> is for.
However, you can modify your HTML here:
<p>Dostępne: <span style="color:green">1</span></p>
<p>Niedostępne: <span style="color:red">1</span></p>
P tag will(If blocked behavior is not changed by CSS or Javascript) always creates a new line because it is a block tag. To get your output you can wrap it with a span tag as it is an inline tag.
<p>Dostępne: <span style={{color:'green'}}>{props.ile_aktywne}</span></p>
<p>Niedostępne: <span style={{color:'red'}}>{props.ile_nieaktywne}</span></p>
and if you want it as an ordered list add autonumbering. You can wrap with ol and replace p tag with li.
<ol>
<li>Dostępne: <span style={{color:'green'}}>{props.ile_aktywne}</span></li>
<li>Niedostępne: <span style={{color:'red'}}>{props.ile_nieaktywne}</span></li>
</ol>
Please check this as reference https://www.w3schools.com/html/html_blocks.asp
I want to generate a span element for each saved tag from my collection tag's array.
I use firebase and get in *ngFor loop i get one big span element with all saved tags separated by comma, instead of getting a span for each tag. Is there any way that i can't prevent this from happening. Also i have created an interface for Saved.
Thanks in advance.
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">{{saved?.title}}</h5>
<hr />
<div *ngFor="let tag of saved.tags">
<span class="badge badge-pill badge-primary">{{saved?.tags}}</span>
</div>
<hr /> View
</div>
</div>
//Saved interface in Saved.ts file
export interface Saved {
id: string;
title: string;
tags: string[];
}
Try having your code like this. This should make the span element repeat rather than the div and then make sure to reference the individual tag rather than the array inside.
If the tag has a name / title attribute swap {{ tag }} for {{ tag.title}}
looking at the interface its just {{ tag }}.
<div>
<span *ngFor="let tag of saved.tags" class="badge badge-pill badge-primary">
{{tag}}
</span>
</div>
Reference to Angular docs on using *ngFor to display data.
At the moment, you are referencing the array inside your *ngFor. So, as a result, you should see the whole list of n tags, for n times. If you switch from {{saved?.tags}} to {{tag}}. You will see one div per tag including one span and a single tag inside.
So for getting one span per tag, use it like the following:
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">{{saved?.title}}</h5>
<hr />
<div>
<span class="badge badge-pill badge-primary" *ngFor="let tag of saved.tags">
{{tag}}
</span>
</div>
<hr />
View
</div>
</div>
I have a table which has a column with Name. I need to add the surname within brackets inside the Name column. Name is a hyperlink. When i add the surname between the tag as below i am not able to see the surname value.Even the brackets inside the tag are not displayed in the interface. but surname variable outside the tag is displayed without any errors. Help me please.
<a nwf-elipsize-contents="{{row.entity[col.field]}}"
data-abc-id="report-grid-{{col.field}}"
title="{{row.entity[col.field]}}"
ng-href="{{ grid.appScope.getObjectLink(row.entity,col.field) }}">
{{row.entity[col.field]}} ({{row.entity["surname"]}})
</a>
{{row.entity["surname"]}}
Use <span> elements:
<a ng-href="{{ grid.appScope.getObjectLink(row.entity,col.field) }}">
<span nwf-elipsize-contents="{{row.entity[col.field]}}"
data-abc-id="report-grid-{{col.field}}"
title="{{row.entity[col.field]}}">
{{row.entity[col.field]}}
</span>
<span> ({{row.entity["surname"]}})</span>
</a>
{{row.entity["surname"]}}
I have the following html code of which I need to extract the €194,99 using a Nokogiri css selector and I cannot get what I need.
<p class="price price-offer price-len5">
<span class="border">
<span class="price-old">€219,99</span>
€194,99
</span>
</p>
I've tried these selectors without luck:
product.css('.price span:not(.price span span)').text
product.css('.price:not(.price-old)').text
Do you guys have any ideas?
Thnx
That would be:
product.at('.price-old').next.text
or
product.at('.price .border').children[-1].text
I have a list of questions to display.
I would like to add a question mark icon next to the question whenever it has a description.
<ul class="list-group" data-toggle="items" ng-repeat="ques in questions">
<li class="list-group-item"><input type="checkbox" /> {{ques.question}}
<div ng-if="{{ques.description}}">
<i class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</div>
</li>
</ul>
So I add all the question and when it has a description I would like to add an icon.
The code above is not working so if you can help !
Thx
ng-if="ques.description"
without the curly brackets, should do it, with a recent version of angular.js (>1.1)
For more information, please check the ng-if official documentation
However, if you are using an older version of angular.js, you cannot use the ng-if directive. It would explain why your glyphicon is always displayed, regardless of the ng-if condition.
If it is the case, here is a workaround:
<div ng-switch="ques.description==null">
<i ng-switch-when="false" class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</div>
Try change line:
<div ng-if="{{ques.description}}">
to:
<div ng-if="ques.description">
Replace this part :
<div ng-if="{{ques.description}}">
<i class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</div>
with :
<span ng-if="ques.description">
<i class="glyphicon glyphicon-question-sign" title="{{ques.description}}"></i>
</span>
Fiddle
1st thing remeber ng-if="expression" never works with interpolation directive {{}} it will need an expression, It would be great if you check length.
And for better binding with title attribute use ng-attr-title, it will create title attribute when {{ques.description}} get parsed.
<div ng-if="ques.description.length > 0">
<i class="glyphicon glyphicon-question-sign" ng-attr-title="{{ques.description}}"></i>
</div>
The solution is in the comments below my post.
The probleme was that I was on a 1.0.x version of angularJS which did not have the ng-if directive.
I downloaded a new angular.js and now it works !