CODEWITHSUNDEEP
javascriptjqueryhtmlcssselenium
Matas Vaitkevicius
Matas Vaitkevicius

Reputation: 61461

CSS selector .find(">div.childCollapsible>div[data-onthemovecollapsible=true]") is not respecting parent restriction

Actual case is much more complicated but please play along. I am trying to select siblings of element that has class 'sss', by using 

$('.sss').parent().parent().find(">div.childCollapsible>div[data-onthemovecollapsible=true]")

I can only use CSS selectors (this is part of Selenium thest). I expected to get only siblings of 'sss' however I am getting all the children of sub elements too.

How could I restrict it only to siblings? or any other workaround that can get me from any element in the tree siblings only of any 

data-onthemovecollapsible="true"

attribute holder.

EDIT: Firstly I would like apologise for failing to express myself clearly. The structure that I am working with is 'infinite tree structure' that has unknown amount of nodes on each layer, mechanism I am looking for is ability to get siblings on the same level that I am starting search from is and only children of his parent (his brothers + himself). All levels of tree have identical HTML syntax, so looking at them relatively from element one starts from, each layer is identical, hence the CSS selector should be identical too. I cannot use any other Jquery method but 'find', and only can use CSS selectors, as mechanism is part of selenium test so only By.CssSelector("...") can be used. I can traverse up the elements by using element.FindElements(By.XPath("..")) that gets me parent as I know how many levels up parent is, but from parent position I need to get all siblings without children (that have identical html syntax) in one go, so i would assume selector with only certain layer should do (like one in jsfiddle below), however it selects all the children nodes too - does not respect '>' for some reason. This would do nicely if I could use all JQuery functions.

$('.sss').parent().parent().children().children()

what I need is same result but with CSS selector.

http://jsfiddle.net/2a46U/

Upvotes: 0

Views: 111

Answers (3)

DD.
DD.

Reputation: 1075

I've updated your jsfiddle with two options (check the console please):

Get all the siblings:

$('.sss').siblings();

Get specific siblings:

$('.sss').siblings("div.AppletBase")

If you need to set styles you can use the siblings selector in CSS3:

.sss ~ div.AppletBase {/* Your styles in here */}

Anything please leave a comment and I will review it again if is needed

Upvotes: 0

James Montagne
James Montagne

Reputation: 78690

If I'm understanding this correctly, you have two different restrictions here. One is that you only want siblings of an .sss element. The other is that the parent of the element is div.childCollapsible. I don't believe you will be able to do this with a single selector/find. You would need something like this:

// get the siblings of .sss with appropriate data attribute
var $els = $('.sss').siblings("div[data-onthemovecollapsible=true]");

// filter the collection to only those with appropriate parent
$els = $els.filter(function(){
    return $(this).parent().is("div.childCollapsible");
});

http://jsfiddle.net/2a46U/4/

Upvotes: 0

Richard
Richard

Reputation: 9029

I think this will work for you:

.find("body>div>div>div>div.childCollapsible>div[data-onthemovecollapsible=true]")

Upvotes: 1

Related Questions