<div class = ui-dialog-abc ui-dialog-xyz>
<div id = "sheet1abc">
</div>
</div>
<div class = ui-dialog-abc ui-dialog-xyz>
<div id = "sheet1xyz">
</div>
</div>
<div class = ui-dialog-abc ui-dialog-xyz>
<div id ="sheet2foo">
</div>
</div>
<div class = ui-dialog-abc ui-dialog-xyz>
</div>
Can I select a div based on what div it contains? I want to make the div containing the div whose id contains sheet1 visible or hidden.
If I've understood you correctly, you are looking to select the div that is a parent of a div with an id beginning with "sheet1".
If that's correct, you can do the following:
$("div[id^=sheet1]")
That will select all div elements with an id beginning with "sheet1". You can then loop through the set of elements using each and get the parent of each element to access the parent div.
Once you have the parent div, you can show/hide it using show or hide.
See an example fiddle in which I alert the id of the each matching parent div.
Update
If the child div you are looking for is not a direct child of the ancestor div, you can use parent().closest('div') to climb the DOM tree to find the first ancestor div of the div with your id.
The question asks to get the "div containing the div...", so this method will get the first ancestor div. See this fiddle, in which the child div is contained within a table.
$('div').has('div[id="sheet1abc"]').text();
$('div').has('div[id="sheet1xyz"]').text();
Grab all divs whose ids contain 'sheet1', then grab their closest containing div:
$('div[id*=sheet1]').map(function() {
return $(this).parents('div:first')[0]
});
Related
I need to select the first div element whose classes match the style-[0-9]+ classB pattern.
e.g.:
<div class="style-123 classB">Div1</div>
<div class="style-235 classB">Div2</div>
<div class="style-173 classB">Div3</div>
The Div1 div should be selected in this example.
How to do that in TestCafe?
Selector('div').withAttribute('class', /style-[0-9]+ classB/)
I'm trying to click on one value (odds) based on the name of the other element but those two need to be inside a specific parent element which I get by the text inside it.
The snippet below can be found multiple times on the same page with the same classes so targeting by class is not an option.
I first need to get a container with text "1st Goal. Then I need to get it's parent and in the parent, I need to get the second div element (class parent2). That element holds other elements. Let's imagine I need to get the element of value 200 and click on it.
I've tried using parentElement, parentNode but always get the 'undefiend' when getting a parent of the child element, although the child element is retrieved successfully. I just can't get the parent from where I could go down the tree to the desired element and click on it.
<div class="group ">
<div class="parent1 "><span>1st Goal</span></div>
<div class="parent2">
<div class="container ">
<div">
<div><span>Malaga</span><span class="odds">200</span></div>
<div><span>No 1st Goal</span><span class="odds">300</span></div>
<div><span>Las Palmas</span><span class="gll-odds">400</span></div>
</div>
</div>
</div>
<div></div>
</div>
XPath expressions
If you are okay with using XPath expression, you can use the following statement:
//div[contains(#class, "group") and contains(., "1st Goal")]/div[#class="parent2"]//span[#class="odds"]
This XPath expression queries for a div element having the class group and containing the text 1st Goal somewhere. Then it will query the children div with the class parent2 and query span elements with class odds inside.
Usage within puppeteer
To get the element with puppeteer, use the page.$x function. To click the element, use elementHandle.click.
Putting all together, the code looks like this:
const [targetElement] = await page.$x('//div[contains(#class, "group") and contains(., "1st Goal")]/div[#class="parent2"]//span[#class="odds"]');
await targetElement.click();
const parent_node = await child_node.getProperty('parentNode')
You can try this one
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
Not sure if this is possible.
I want to select all elements with a class name and only affect the one element being hovered at that time and not the whole class. i can't use ids since they are a lot.
$('.hideme').hover(function(){
$('.hideme').hide();
});
and then.
<div class='hideme'></div>
when the above hides, the following shouldn't hide.
<div class='hideme'></div>
<div class='hideme'></div>
<div class='hideme'></div>
If you try to hide by using clss name, then DOM will hide all the element with same name.
So you have to use this keyword for selecting current hovered element.
Try following:
$('.hideme').hover(function(){
$(this).hide();
});
Basically I want to be able to select the div level2 parent from the child level4 div. My application does not has such classes, otherwise I'd just select level2 :)
<div class="level1">
<div class="level2">
<div class="level3">
<div class="level4"></div>
</div>
</div>
<div class="level2"> <!-- this is hidden -->
<div class="level3">
<div id="start" class="level4"></div>
</div>
</div>
</div>
I start with $('#start') and search for the first parent which is visible, but I'm not seeing a way to return the child of that parent. Searching for $('#start') inside the parent seems very wasteful as I start with a sub child to begin with.
$('#start').closest(':visible') // returns level1
$('#start').closest(':visible').first() // returns the first level2. I can't just use second because the number of level2s can change.
$('#start').closest(':visible').children().each(function(){ /* do some search to check it contains `$('#start')` }) // seems very wasteful.
Another way to look at what I'm trying to say would be; start in the middle, find the outside (the visible element), and move one element in.
How about this:-
$('#start').parentsUntil(':visible').last();
This will give you all hidden parent div's until its visible parent and last() wil give the outermost parent which is hidden. last is not a selector on position it is the last() in the collection.
You want the .has() method
Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
$('#start').closest(':visible').children().has('#start');
See fiddle for example.
You say that the classes don't exist...why not add them? It would make thinks much easier to find. The class names don't need to have actual styles associated.
var allLevel4 = $('#start').closest(':visible').find('.level4');
var firstLevel4 = $('#start').closest(':visible').find('.level4')[0];
var secondLevel4 = $('#start').closest(':visible').find('.level4')[1]; //also, #start
Use .filter():
$('#start').closest(':visible').children().filter(':first-child')
.find() is also good for selecting pretty much anything.