d3.select('.activity:last') and d3.selectAll('.activity:last') both fail. Meanwhile; $('.activity:last') works.
d3.selectAll('.activity:last')
.append('<div class="hook-table">Table comes here</div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
<div class="activity"></div>
<div class="activity"></div>
<div class="activity"></div>
<div class="activity"></div>
<div class="activity"></div>
</div>
Is there a D3 way to pass :last selector.
:last is not a valid css selector. It works with jQuery because jquery has added support for this selector:
:last is a jQuery extension and not part of the CSS specification (docs)
As D3 only contemplates valid CSS selector strings so :last won't work with D3.
Instead you'll require a bit more code to get the last element.
If your div is the last of of its siblings, then you can use :last-child:
d3.select(".container").select(".activity:last-child")
.text("5: This div selected");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
<div class="activity"><p>1</p></div>
<div class="activity"><p>2</p></div>
<div class="activity"><p>3</p></div>
<div class="activity"><p>4</p></div>
<div class="activity"><p>5</p></div>
</div>
However, this won't work if you have another element below the last div. The above will select the div with class "activity" that is the last child of .container (see MDN).
For more complex structures, where the last div or element with class "activity" isn't the last sibling, you'll need to take a more complex approach.
Related
i want to hover on a svg element inside div element with class main. this svg element has title tag "Header element"
below is the code
<div class="main">
<div class="box">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell">
<div>
<svg></svg>
<span> //want to hover on this element
<svg>
<title>Header element</title>
</svg>
</span>
</div>
</div>
</div>
</div>
as seen from code above, i want to hover on span element that contains svg with title Header element.
i have tried using below
cy.get(`.main>div`)
.contains('svg', 'Header element')
.trigger('mouseover')
but this is not working
could someone help me locating this span element using cypress. thanks.
You are selecting the svg but want to hover the span, so add a parent selector
cy.get(`.main>div`)
.contains('svg', 'Header element')
.parent('span')
.trigger('mouseover')
I think you are missing . (class selector)
cy.get(`.main>div`)
.contains('svg', 'Header element')
.triggers('mouseover')
I have following markup (schema.org attributes included):
<body>
<div itemscope itemtype="http://schema.org/Foo">
<div>
<div itemname="name">
Foo scoped name
</div>
</div>
<div>
<div itemscope itemtype="http://schema.org/Bar">
<div>
<div itemname="name">
Bar scoped name
</div>
</div>
</div>
</div>
</div>
</body>
I need to select (presumably by xpath as css selectors won't be enough for the task) divs that have itemname="name" in http://schema.org/Foo scope but not those that have another element with itemscope attribute ascending them.
So in example provided I need to select only "Foo scoped name", but not "Bar scoped name".
You can use something like :
//div[#itemname="name"][ancestor::div[#itemscope][1][#itemtype="http://schema.org/Foo"]]
Look for a div element with a specific attribute value (#itemname="name"). Its first div ancestor (with #itemscope attribute) contains also a specific #itemtype attribute value (http://schema.org/Foo).
Output : <div itemname="name"> Foo scoped name </div>
I have following HTML
<div class='wraper'>
<div class="demo statemachine-demo1">
<div class="w" id="inperson">IN PERSON
<div class="ep"></div>
</div>
<div class="w" id="rejected">
REJECTED
<div class="ep"></div>
</div>
</div>
<div class="demo statemachine-demo1">
<div class="w" id="inperson">IN PERSON
<div class="ep"></div>
</div>
<div class="w" id="rejected">
REJECTED
<div class="ep"></div>
</div>
</div>
</div>as per the above HTML the wrapper div contains two div each .demo div contains two div and are connected to each other .statemachine-demo1 .inperson div to .statemachine-demo2 .inperson(.statemachine-demo1.inperson ----> .statemachine-demo2.inperson) and .statemachine-demo1 .reject to .statemachine-demo2 .reject(.statemachine-demo1.reject -----> .statemachine-demo2.reject).
now if i drag class w the join line will move continuously, but what i want to know is their any way if i drag parent div statemachine-demo1 the child div reject and inperson class div should also move along with joined line continuously.
For this you need customised jquery draggable function instead of using jsPlumb.draggable() for parent div's. Whenever you drag a parent div, you need to check whether any of the child has connection, if so you need to repaint those connections. Code:
$('.demo').draggable({ // considering parent div has 'demo' class as in your case
drag:function(event){
// on drag check any child has connections and repaint them
$(this).find('._jsPlumb_endpoint_anchor_').each(function(i,el){
jsPlumb.repaint($(el));
});
}
});
How can I get the element data using jsoup or xpath.
My requirement is
if i have selected class='SecondClass' then how to find its parent "FirstClass". Means if i have selected class="SecondClass">yyyyyyyyy then how to find
class="FirstClass">Hi element
<div class="FirstClass">Hello</div>
<div class="SecondClass">xyza</div>
<div class="SecondClass">lllllllll</div>
<div class="FirstClass">Hi</div>
<div class="SecondClass">ooooooooo</div>
<div class="SecondClass">yyyyyyyyy</div>
<div class="SecondClass">ttttttttyt</div>
<div class="FirstClass">HelloHi</div>
<div class="SecondClass">xysefsfza</div>
<div class="SecondClass">hohoho</div>
<div class="SecondClass">xydadaza</div>
<div class="SecondClass">new</div>
You can try this XPath expression to get nearest preceding <div> element having class attribute value equals FirstClass :
/preceding-sibling::div[#class='FirstClass'][1]
With that, given XML data is as posted in question, and current element is this :
<div class="SecondClass">yyyyyyyyy</div>
XPath query above will return this element :
<div class="FirstClass">Hi</div>
I am trying to find the xpath for only the child of a navigation bar. The path which I am trying at the moment is //div[#class='navCol subMenus'] from this peace of HTML.
<div class="PrimaryNavigationContainer">
<div class="PrimaryNavigation">
<div class="Menu">
<div>
<span>Brands</span>
<div class="navCol">
<div>
<a class="NoLink unselectable"><span>Shop by Brand</span></a>
<div class="navCol subMenus">
<div>
<span>blah</span>
I have tried a number of Xpath syntax but none seem to work to bring up just the sub categories. Thank you for any help which you can provide.