Choose elements that are not contained within a certain designated element

Question

Choose elements that are not contained within a certain designated element

I am looking to choose one or more elements that are NOT children of a specific element.

<html>
<body>
    <div>
        <p>
            <b>
                <i> don't pick me </i>
            </b>
        </p>
    </div>  
    <div> 
        <i>don't pick me either </i>
    </div>  
    <i> select me </i>
    <b> 
        <i> select me as well </i>
    </b>
</body>
</html>

In the illustration above, my goal is to pick all 'i' elements that are not contained within div elements. It's not straightforward using ('div i') in :not() function.

How can I pick all i elements outside of div elements? The common suggestion is to use jQuery, such as:

nondiv_i = all_i.not(all_div.find("i"))

I cannot utilize jQuery, but jqLite - which does not have a not()-function. A jqLite solution is appreciated too! Is there a way to achieve this without repetitive iterations and comparisons?

Edit: To clarify, I want no div ancestors for my i-elements, not just direct div parents.

A related XPath would be like this:

//i[not(ancestor::div)]

javascript angularjs selenium-webdriver css-selectors jqlite

Answer 1

Answer №1

function checkChild(parentNode, childNode) {
    var elements = parentNode.getElementsByTagName(childNode.tagName);
    for (var index = -1, length = elements.length; ++index < length;) {
        if(elements[index]==childNode){
            return true;
        }
    }
    return false;
}

in the context of your specific situation;

isTags = document.getElementsByTagName("i");
divTags = document.getElementsByTagName("div");
nodesWithoutDivParent = [];
var found;
for(i=0;i<isTags.length;i++){
    found = false;
    for(j=0;j<divTags.length;j++){
        if(checkChild(divTags[j], isTags[i])){
            found = true;
            j = divTags.length;
        }

    }
    if(!found){
        nodesWithoutDivParent.push(isTags[i]);
    }

}

Answer 2

function checkChild(parentNode, childNode) {
    var elements = parentNode.getElementsByTagName(childNode.tagName);
    for (var index = -1, length = elements.length; ++index < length;) {
        if(elements[index]==childNode){
            return true;
        }
    }
    return false;
}

in the context of your specific situation;

isTags = document.getElementsByTagName("i");
divTags = document.getElementsByTagName("div");
nodesWithoutDivParent = [];
var found;
for(i=0;i<isTags.length;i++){
    found = false;
    for(j=0;j<divTags.length;j++){
        if(checkChild(divTags[j], isTags[i])){
            found = true;
            j = divTags.length;
        }

    }
    if(!found){
        nodesWithoutDivParent.push(isTags[i]);
    }

}

Answer 3

Answer №2

To target all <i> tags, add a custom class like "itag". Afterwards, you can retrieve them using getElementsByClassName:

var elements = document.getElementsByClassName("itag");
console.log("Total number of elements: " + elements.length);

You can then access them by their index:

console.log(elements[0]);
console.log(elements[1].innerHTML); // Retrieve text inside the i tag

Answer 4

To target all <i> tags, add a custom class like "itag". Afterwards, you can retrieve them using getElementsByClassName:

var elements = document.getElementsByClassName("itag");
console.log("Total number of elements: " + elements.length);

You can then access them by their index:

console.log(elements[0]);
console.log(elements[1].innerHTML); // Retrieve text inside the i tag

Choose elements that are not contained within a certain designated element

Answer №1

Answer №2

Similar questions

AngularJS fetching data with two separate AJAX requests for both HTML and JSON responses

Exploring the contrast between web elements and ElementFinders in Protractor

What is the best method for sending a DbGeography parameter to MVC?

sticky navigation causing issues with tab functionality

Create a WebGL object remotely on the server

Complete the modal window form

Ensuring Map Safety in Typescript

`Custom transitions between sections using fullpage.js`

Having trouble understanding why getStaticProps function is not loading before the main exported function

Methods for setting the value of a scope variable within a controller's function

Concatenate a variable string with the JSON object key

Behind the scenes, unable to launch due to Schema Error

My div does not refresh when using .load

Utilizing various Firestore requests at varying intervals using the useEffect hook in React

Error message: The AJAX POST request using jQuery did not return the expected data, as the data variable could not be

Using JQuery's $.post function can be unreliable at times

When a text is wrapped by an HTML div using absolute positioning, is there a way to prevent it from wrapping without relying on white space

Manipulate sibling elements using jQuery's addClass and remove methods

I was surprised to find something other than a gulp folder in the node_modules directory after running npm install gulp --save-dev

AngularJS Data Binding Issue - Watch cycle fails to trigger