Looking for all descendant elements which parent does not have this css class - xpath

I am trying to get all children which has specific class and parent of this parent does not have a specific class.
I am trying a code like this, but it's not working.
$hrefs = $xpath->evaluate("//div[not contains(#class, 'tested-app-section')]/div[#class='product-container-body']/div");
Structure of the HTML I am working with and need to edit a little bit looks like this, other HTML content in <body> is irrelevant. (<body> contains more then just this block of HTML):
<body>
<div class="product-detail-section tested-app-section">
<div class="product-container-head"> ... </div>
<div class="product-container-body"> ... </div>
<div class="product-container-body"> ... </div>
</div>
<div class="product-detail-section publish-app-section">
<div class="product-container-head"> ... </div>
<div class="product-container-body"> ... </div>
<div class="product-container-body"> ... </div>
</div>
<div class="product-detail-section product-specific-section">
<div class="product-container-head"> ... </div>
<div class="product-container-body"> ... </div>
<div class="product-container-body"> ... </div>
</div>
I am trying to avoid in the result the very first <div> box (box with class "tested-app-section"), then I am trying to avoid everything witch class "product-container-head".
But I just cannot find a way how to do it.
Edit: So basically I am trying to get
/html/body/div[contains(#class, 'product-detail-section') AND not contains(#class, 'tested-app-section')]/div[not(#class='product-container-head')]
but this code doesn't return anything...

You are close, but missed a few things. Try this xpath expression and see if it works:
//div[not(contains(#class, 'tested-app-section'))]/div[not(#class='product-container-head')]

Related

Xpath get child that does not contain class

I have a xml like this and am trying to select the groupIdentifier element without the display:none child (would like to use the css "identifier" along with it) to finally select the input. Have been at this for hours and would like to call the xpath gods to help me out.
<div class="groupIdentifier">
<div>
<input class="inputClassIdentifier">
</div>
<div>
...
<div>
<div class="something">
... some more elements
</div>
<div class="identifier hidden" style="display: none">
... some more elements
</div>
<div class="something">
... some more elements
</div>
</div>
</div>
</div>
<div class="groupIdentifier">
<div>
<input class="inputClassIdentifier">
</div>
<div>
<div>
<div class="something">
... some more elements
</div>
<div class="identifier ">
... some more elements
</div>
</div>
</div>
</div>
Thanks
edit:
I have
//div[contains(#class, 'identifier') and not(contains(#style, 'display: none'))] which basically selects the identifier div of the second section.
What I need now is to select the input with class inputClassIdentifier within its parent.
Here's your xpath.
//div[#class='groupIdentifier' and div/div/div[not(contains(#style, 'display: none'))]]
I got it using descendant axis
//div[#data-testid='groupIdentifier' and descendant::div[contains(#class, 'identifier') and not(contains(#style, 'display: none'))]]//input[#name='inputClassIdentifier']

How do I name these classes under the BEM methodology?

Image below is the output of my code
Are these names correct under BEM methodology?
<div class="container">
<div class="container__button-row--1">
<div class="button-row__button--first"></div>
<div class="button-row__button"></div>
<div class="button-row__button"></div>
...
<div class="button-row__button--last"></div>
</div>
<div class="container__button-row--2">
...
</div>
</div>
Given the sample code in your question I'd suggest the following. But I would also point out that container is a bad name for a component/Block since it really general and does not indicate the purpose of the Block.
For modifiers you should use both the element and the modifier in the class attribute e.g. block__element block__element--modifier
<div class="container">
<div class="container__button-row container__button-row--1">
<div class="container__button container__button--first"></div>
<div class="container__button"></div>
<div class="container__button"></div>
...
<div class="container__button container__button--last"></div>
</div>
<div class="container__button-row container__button-row--2">
...
</div>
</div>

Display data with an AngularJS ng-repeat, in a div, side by side

I have an arraylist from which I need to get values where isActive = true, and to display the data in a <div> tag with the use of ng-repeat.
My problem is that I don't want to keep using ng-repeat every time, while fetching values in each <div> tag.
Is there any generic solution which will iterate only once, and I can see the value in <div>, side by side. Please see this attempt:
enter link description here
I want to see a result like this:
You can write your ng-repeat like below.
Whenever it get isActive true, it will create the div section for this.
<body ng-controller="MainCtrl">
<div ng-repeat="tempData in data">
<div ng-if="tempData.isActive == true" >
<div class="col-xs-12" >
<div class="col-xs-4">Plan Type:</div>
<div class="col-xs-8">{{tempData.plantype}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Term:</div>
<div class="col-xs-8">{{tempData.term}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Rate:</div>
<div class="col-xs-8">{{tempData.rate}}</div>
</div>
</div>
</div>
</body>

Is it possible to use non-recursive CSS selectors with the Ruby Nokogiri gem?

If I have HTML like this:
<div id="target">
<div id="a1">
<div class="1">
</div>
<div id="a2">
<div class="2">
<div class="3">
<div class="4">
</div>
<div id="b1">
<div class="1">
</div>
<div id="b2">
<div class="2">
<div class="3">
<div class="4">
</div>
...
...
</div>
...is it possible to select only the first level of div elements from target. So, if I run page.css('#target div').each then I get every single div inside target. If I just want the results to contain the divs with ids ['a1','a2','b1','b2'] is that possible with Nokogiri?
Yes, this is called a child selector
#target > div
Without the > you have a descendant selector, which doesn't care if it's a child, grandchild, great grandchild etc.

Div id generating with php

I'm using smarty CMS so for adding php code i have to edit index.inc.php then i have to call that on from tpl file.. so what i need is
Example at present it showing like this
<div id="div1"> ... </div>
<div id="div1"> ... </div>
<div id="div1"> ... </div>
<div id="div1"> ... </div>
<div id="div1"> ... </div>
same div1 id in all tags.. i need it to show like this
<div id="div1"> ... </div>
<div id="div2"> ... </div>
<div id="div3"> ... </div>
<div id="div4"> ... </div>
<div id="div5"> ... </div>
Please show me to generate id numbers from 1 to 5 through php i will try to implement it to smarty...
Use smarty's {section}:
{section name=divLoop loop=5}
<div id="div{$smarty.section.divLoop.iteration}">...</div>
{/section}
Full syntax documentation can be found here:
http://www.smarty.net/docsv2/en/language.function.section.tpl

Resources