I have to iterate over the html content of each div one by one.
<div class="category"> 1 </div>
<div class="category"> 2 </div>
<div class="sub-category"> <ul><li></li>....</ul> </div>
<div class="category"> 4 </div>
<div class="sub-category"> <ul><li></li>....</ul> </div>
<div class="category"> 6 </div>
I have tried
element.select("div.category")
element.select("div.sub-category")
it fetches data but not in sequence.
I just want to fetch one category then its sub-category. Also note that some category don't have sub-categories.
Kindly suggest anyone, the proper way to do this. Thanks.
You can use these syntaxes:
[attr^=value]: for elements with attributes that start with value
[attr$=value]: end with value
[attr*=value]: contain the value
In your case: "category" & "sub-category" both contain the substring "category" and end with "category" therefore you can use:
.select("div[class*=category]") or
.select("div[class$=category]")
Related
Is any solution how get last N-grandchildren if know his N-grandparent. Its like: I know start point of branch and I need take last element of this branch.
<div class="start-parent">
...
... // a lot of other elements
...
<div class="last-child end-of-branch"></div>
</div>
Assuming you html looks like this:
<div class="start-parent">
<div class="first-child of-branch"></div>
<div class="second-child of-branch">
<div class="a grand-child of-branch"></div>
<div class="last grand-child end-of-branch"></div>
</div>
<div class="last-child end-of-branch"></div>
</div>
This expression:
//div[#class="start-parent"]//*/*[last()]/#class
selects
last grand-child end-of-branch
while this one
//div[#class="start-parent"]/div[1]/following-sibling::div[last()]/#class
selects
last-child end-of-branch
I am learning angular n making a project. display table
I have this above page in which I want to separate the records by type. however I am not able to get the condition right. Can someone help me. Below is my code.
<div class="row">
<div class="col">
<h3>Escalations</h3>
</div>
</div>
<div ng-if="notes.values === 'Escalations' ">
<app-list-view
[data]="notes.values"
[cols]="notes.cols"
[routeInfo]="notes.routeInfo"
[sortBy]="'isActive'">
</app-list-view>
</div>
I have below an HTML code which utilizes ng-repeat to show data. The data is separated to two columns, and each column will have more or less the same number of data (shown through links).
However, to do this, I traversed through the same set of data twice, with two different ng-repeat conditions (with the first traversal showing the first set of data in the first column, and the second traversal showing the second set of data in the second column).
I believe this is really redundant (and time consuming, too), because for the first traversal, I get the first half of the data then skip the rest (by ng-if), and for the second traversal, I get the second half.
Is there a way to traverse through the data just once, but still being able to show the division of data?
Note: I've tried putting ng-repeat before the first < div class="column" >, and keep the conditionals inside < a >, but what happens is that even the < div class="column" > repeats, which shouldn't be the case. I just want the < a > tags to repeat in their corresponding columns.
Code
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies" ng-if="$index <= (agencies.length/2)">
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies" ng-if="$index > (agencies.length/2)">
{{agency.name}}<br>
</div>
</h5>
</div>
</div>
My improvement is to use 'limitTo' pipe, instead of ng-if.
Look at this version, it's more efficient.
{{agFull = agencies.length; ""}}
{{agHalf = agFull/2; ""}}
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies | limitTo : agHalf">
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies | limitTo : agFull : agHalf">
{{agency.name}}<br>
</div>
</h5>
</div>
</div>
I would also recommend to store agencies.length & agencies.length/2 in a variable, as I did above. You can also use the controller for that, if you don't like template variables.
Since you are looking to optimize, i suggest that you split your array in to two in the controller. This will remove the redundancy. Don't let your view to the the controller's work.
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies[0]" >
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies[1]">
{{agency.name}}<br>
</div>
</h5>
</div>
Let's say I have a product within a collection. Is it appropriate to call the product "feature-collection__product" so it's still an element within the block of "feature-collection" or call it "feature-collection-product" so it becomes it's own block, as it has other elements within it, or something different.
<div class="feature-collection">
<div class="feature-collection__product">
<h2 class="feature-collection__product-title"></h2>
<h2 class="feature-collection__product-price"></h2>
</div>
</div>
OR
<div class="feature-collection">
<div class="feature-collection-product">
<h2 class="feature-collection-product__title"></h2>
<h2 class="feature-collection-product__price"></h2>
</div>
</div>
Most likely the correct answer is both:
<div class="feature-collection">
<div class="feature-collection__product product">
<h2 class="product__title"></h2>
<h2 class="product__price"></h2>
</div>
</div>
The situation when you have different entities on the same DOM node is called mix. In this case it's reasonable to have independent block product and also an element of feature-collection to set some styling for production inside feature-collection.
For more info about mixes please take a look at https://en.bem.info/methodology/key-concepts/#mix and https://en.bem.info/methodology/faq/#mixes
I have the following simplified markup:
<div class="row">
<div class="col-lg-3" ng-if="isSuperUser()">
Conditional column 1
</div>
<div class="col-lg-3">
Column 2
</div>
<div class="col-lg-6">
Column 3
</div>
</div>
I want Column 3 to take up the last 6 grid columns always. I also want the contents of Column 1 or Column 2 if not a super user to take up the first 3 grid columns depending.
The problem is when the Column 1 is not displayed, Column 2 and Column 3 shift to the left such that Column 3 is no longer on the right side. A solution that seems hacky is to add a <div class="col-lg-3" ng-if="!isSuperUser()"> before Column 3, but it seems like there may be a better solution.
I can't see anything in Bootstrap's documentation that demonstrates this functionality. I see there is push and pull classes, but they don't seem to be what I'm looking for.
Thanks in advance.
JSBIN
you can try nest row into the .col-xs-*. That's mean you could use the out row to fixed position before you want hidden something.
<div class="container">
<div class="row">
<div class="col-xs-6">col 6
<div class="row">
<div class="col-xs-2">
2
</div>
<div class="col-xs-10">
10
</div>
</div>
</div>
<div class="col-xs-6">col 6
<div class="row">
<div class="col-xs-12">
your purpose
</div>
</div>
</div>
</div>
</div>
You are looking to offset columns in Bootstrap. Conditionally add the class .col-lg-offset-3 to the second column.