CODEWITHSUNDEEP
javascriptjqueryhtml
bldev
bldev

Reputation: 137

How to select element based off specific parent structure in JS?

I am trying to write a script that will get the grab the only if the parent structure is div.main-element input+label+ul.

Is there any appropriate way to set that up using javascript or jquery?

If anyone could direct me to the appropriate answer or documentation that would be absolutely awesome.

My end goal would be to replace the ul>li with an hr tag using either an append or .replace()

here is my HTML:

<div class='main-element'>
    <input>
    <label></label>
    <ul>
        <li>Example</li>
    </ul>
</div>
<div class='main-element'>
    <input>
    <label></label>
</div>

Upvotes: 1

Views: 636

Answers (3)

Marc Puigvent&#243;s Sanz
Marc Puigvent&#243;s Sanz

Reputation: 188

This will get all elements with your composition and replace ul>li by hr.

var elements = document.querySelectorAll(".main-element input+label+ul li");

for(var i = 0; i < elements.length; i++){
    var parent = elements[i].parentNode.parentNode;
    var ul = elements[i].parentNode;
    ul.parentNode.removeChild(ul);
    var hr = document.createElement("hr");
    parent.appendChild(hr);
}

Upvotes: 0

user5372896
user5372896

Reputation:

You could check if the element that you want exists using this kind of code in jquery :

if($("div.main-element ul li").length){
//your code
}

This will execute on your html example, next you can modify the value of the first element using :

$("div.main-element ul li").append("blahblahblah");

Note that this gives you access to the first li tag found inside of a div.main-element>ul of your html page.

Upvotes: 2

Tyler Biscoe
Tyler Biscoe

Reputation: 2432

You can provide a second argument to a jquery call that is the parent container within which you want to get elements from. There is also a find function that does the same thing.

HTML:

<div class='main-element'>
    <input>
    <label></label>
    <ul>
        <li>Example</li>
    </ul>
</div>
<div class='secondary-element'>
    <input>
    <label></label>
</div>

JS:

var $secondaryElement = $('.secondary-element');
var $secondaryInput = $('input', $secondaryElement);

Another approach:

var $secondaryInput = $('.secondary-element').find('input');

Both of the examples above will return ONLY the input element inside of the secondary-element div.

Does that answer your question?

Links:

https://api.jquery.com/find/

and

https://api.jquery.com/jquery/#selector-context

Upvotes: 0

Related Questions