The CSS selector is not properly adhering to the parent restriction as it attempts to find the div childCollapsible that has the attribute data-onthemovecollapsible set to true

Imagine a scenario that is much more complex, but let's try to simplify. I am attempting to choose the siblings of an element with the class 'sss' using

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

I am limited to CSS selectors only (as this is part of a Selenium test). My expectation was to retrieve only the siblings of 'sss', however, I am getting all the children of sub-elements as well.

Is there a way to restrict it to only siblings? Or perhaps another workaround that can help me obtain just the siblings from any element in the tree, specifically those with the

data-onthemovecollapsible="true"

attribute?

EDIT: Let me clarify my issue. The structure I am dealing with is an 'infinite tree structure' with an unknown number of nodes on each layer. What I'm seeking is the ability to fetch siblings at the same level where I start the search and exclusively their parent's children (siblings + self). All levels of the tree have identical HTML syntax, so the CSS selector should be the same across them. I am restricted to using only the 'find' method in jQuery and can use only CSS selectors since this mechanism is part of a Selenium test and requires By.CssSelector("..."). While I can move up the elements using element.FindElements(By.XPath("..")) to reach the parent, from the parent's position, I aim to grab all siblings without children (with identical html syntax) simultaneously. So, ideally, a selector specific to a particular layer would suffice (like the one in the jsfiddle link below), however, it currently selects all child nodes too - not adhering to the '>' operator for some reason. This could work perfectly if I could use all jQuery functions.

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

I am looking for the same outcome but achieved with a CSS selector.

http://jsfiddle.net/2a46U/

javascriptjqueryhtmlcssselenium

Answer №1

Here's a solution that should meet your needs:

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

Answer №2

It seems like there are two specific criteria that need to be met here. First, only siblings of an element with the class name .sss should be selected. Secondly, the parent of these elements must have the class name div.childCollapsible. It appears that achieving this with a single selector/find is not possible. You may need to use something similar to the following code:

// Selecting siblings of .sss with the correct data attribute
var $elements = $('.sss').siblings("div[data-onthemovecollapsible=true]");

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

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

Answer №3

Check out the updated jsfiddle I provided with two different options (make sure to view the console):

To retrieve all siblings:

$('.box').siblings();

To target specific siblings:

$('.box').siblings("div.ParentContainer")

For applying styles using CSS3, utilize the siblings selector like this:

.box ~ div.ParentContainer {/* Your styles go here */}

If you have any further questions or need clarification, feel free to leave a comment for me to address.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Python Selenium - difficulty locating element

Attempting to utilize the selenium tool to input keys into a textbox has proved unsuccessful, even after implementing explicit waits. Disclaimer: I am currently in the early stages of learning python, so it's possible that I may have overlooked a maj ...

pythonseleniumgoogle-chromewebdriverelement

passing commands from a chrome extension to a content script

I want to set up a hotkey that will activate a function in my content script. The content script (main.js) is run when the page loads from my popup.js file. I've included the command in my manifest.json and I can see in the console log that it is tri ...

javascripthtmlgoogle-chrome-extensionsendmessagecontent-script

Problems with Angular UI Router: Functions not functioning properly within the template

Currently, I am delving into the realm of Angular UI Router in order to effectively manage different sections of my application. If you'd like, check out this plunkr (http://plnkr.co/edit/KH7lgNOG7iCAEDS2D3C1?p=preview) Here are some issues that I&a ...

javascriptangularjsangular-ui-router

How can one check in JavaScript if a specific URL was targeted with a XMLHttpRequest?

While I am familiar with monitoring network traffic in the browser's development tools and having XMLHttpRequests shown in the console, I am curious if there is a specific window property that showcases all network activity at once? ...

javascriptxmlhttprequest

Obtain HTML content from a loaded JScript frame

I'm in the process of designing a JScript frame and I'm looking to retrieve the HTML content that has been loaded into it. Does anyone have any suggestions on the best way to accomplish this? ...

htmlurlloadjscript

The event handler has now reverted back to its original undefined state

I'm having trouble with the following code snippet: function dnd(){ } var ele = document.getElementById("relative"); ele.addEventListener("click",dnd,false); document.write(ele.onclick); When I check the output, it shows as undefined. I expect it to ...

javascriptdom-events

Using a mix of filters with Jquery Isotope

I am struggling to merge filters in a similar manner to this example: http://codepen.io/desandro/pen/JEojz/?editors=101 but I'm facing difficulties. Check out my Codepen here: http://codepen.io/anon/pen/gpbypp This is the HTML code I'm working ...

javascriptjqueryhtmltwitter-bootstrapjquery-isotope

suggesting options comparable to addthis or sharethis

Could you please check out ? There is a sharing box in the bottom right corner that resembles ShareThis. However, as far as I know, ShareThis does not have options for embedding or submitting content. Does anyone happen to know which plugin is being used ...

javascriptjqueryhtmlsharethis

Locate the cookie and perform a single redirect in PHP

I am facing an issue with redirecting to a specific page based on the presence of a cookie called "EmailSubscriber". The current condition is such that if the website detects this cookie upon loading, it will automatically redirect to a designated page. $ ...

javascriptphpwordpresscookies

Creating an array by combining two queries using loops: What's the best approach?

I am trying to set the primary array to have the property of a foreign key I have two tables, tipe_akademik and jam_akademik_a The jam_akademik table has a foreign key pointing to tipe_akademik My goal is to display tipe_akademik as having a list of jam ...

javascriptsqlarraysfor-loop

Issue encountered when attempting to use an HTML document as a blueprint for generating additional HTML documents with the

I am currently working on an exercise that involves creating four different files: index.html, home.html, about.html, and contact.html. The objective is to utilize jQuery's .load function to load the other three HTML files within index.html while stil ...

htmljquery

unable to attach picture to the img element

Currently, I am honing my skills in Windows Phone development through WinJS. In my latest project, I have crafted a code snippet that parses JSON data fetched from a specific URL. The objective is to bind the images retrieved to a list view on an HTML page ...

javascripthtmlimagewindows-phone-8.1winjs

Communication between Laravel and controller using AJAX for exchanging information

I have a specific AJAX function being called from a view: function gatherProductData() { var productIds = []; $('#compare-widget tbody tr').each(function(i, ele) { productIds[i] = $(ele).data('product-id'); }); ...

javascriptphpjqueryajaxlaravel

Issue with Jquery/JqGrid: When a grid contains only one column, the grid paging controls are not fully displayed and are cut

On my webpage, I have a grid that is generated dynamically and allows users to choose which columns to display. This grid also has pagination enabled due to the large amount of data rows it can contain. Everything works well in most scenarios, except for ...

jqueryjqgrid

How can I incorporate a search bar or similar feature on my website that mimics the functionality of Ctrl+F?

Is there a way to incorporate a search bar on certain pages of my website that functions similarly to the Ctrl+F feature in Google Chrome? Essentially, I am looking for a "find" function that searches the entire page(s). My site is built using WordPress, ...

htmlwebbrowser

Issue encountered: Next.js version 14, Tesseract.js Error: Module not found .../.next/worker-script/node/index.js'

While working with nextjs 14 and trying to extract text from an image using the tesseract.js node module, I encountered an error where the module was not found. The specific error message I received is as follows: Error: Cannot find module '...(projec ...

javascriptnode.jsnext.jsnode-modulestesseract.js

You must have the Geckodriver executable in your PATH directory for Python 3.5

Even after adding geckodriver.exe to the PATH and restarting my computer, the error persists. You can view the image here. Below is my code : from selenium import webdriver driver = webdriver.Firefox() driver.get('https://stackoverflow.com') ...

pythonseleniumselenium-webdriverfirefoxgeckodriver

A step-by-step guide to implementing the PUT function in AngularJS using Mongoose

My attempt to send a GET request to the Mongo works fine, but I'm having trouble getting the PUT request to work. My suspicion is that there might be an issue with the path from the controller to the router. I've already tried using both update() ...

javascriptangularjsmongodbmongoosecrud

Error encountered due to circular structure in the data being posted in the

const formulaData = $(htmlContainer).find("ins").map(function (i, el) { return { fName: $(el).attr("data-record-name"), fID: $(el).attr("data-record-id"), fContent: $(el).text() } }); //keep if (for ...

javascriptjsontypeerror

Can the size of a linear gradient be predetermined in CSS?

When working with CSS, it's possible to set various properties of a linear gradient such as color, position, orientation, and width. However, is it feasible to define its length? I prefer not to use SVG and am specifically looking for a CSS-based solu ...

htmlcss