This one shouldn't be too hard...
I have a DIV named X, which contains child DIV's A, B, and C (no those aren't the real names). The following jQuery properly selects all textboxes from within DIV X and its children:
var theFields = $("input:text", $("div[id$='X']"));
However, DIV C is an exception and should be skipped. How do I select all textboxes within DIV X and its children, but skip those in child DIV C? I've used the :NOT operator before, but I'm not sure how to use it here.
Thanks.
$('div#X input:not(div#C > input)')
Related
How can i put “Hidden Sub Menu” inside a “Hidden Sub Menu”.
For Example: - I have 4 toolboxes naming A, B, C and D from which A and B and C are hidden. A is hidden and added to B, B is hidden and added to C, C is hidden and added to D. Now from the Toolbox-D, when I drag and drop “C” I should get B in the list and when I select B, then I should get A in the list and then, when I select A, whatever the elements containing by A should list out as options in the diagram workspace.
How can I achieve this behavior.
You can have a maximum of 2 sub-menus( item in the toolbox->Menu A->Menu B)
An Example I can give is the Events in BPMN(2.0)
Item in toolbox
Menu A
Menu B
The first Sub-Menu is done via the hidden-menu functionality of the Toolbox Profiles.
The second Sub-Menu is done via the _subtypeProperty Metaclass attribute
The first sub-menu is useful to differentiate stereotypes with similarities of the same Metaclass.
The second sub-menu is useful for assigning a different shape (from conditional branching in the shapescript of the stereotype) to the element on creation. It can also be used to assign the value of a Tagged Value on creation
I've been learning more about the d3 visualization library, and I've seen a few examples of bar charts that have a snippet that looks like
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y", y)
.attr("width", x)
.attr("height", y.rangeBand());
My confusion is with the first selectAll line. What is the purpose of selecting all rects before they exist since we'll be appending new rects on data enter? Does what goes in the selectAll matter if none of those elements exist?
It is part of the declarative nature of the D3 language. The Thinking with Joins article explains it in detail. An excerpt:
But what’s with the selectAll("circle")? Why do you have to select
elements that don’t exist in order to create new ones? WAT.
Here’s the deal: instead of telling D3 how to do something, tell D3
what you want. In this case, you want the circle elements to
correspond to data: you want one circle per datum. Instead of
instructing D3 to create circles, then, tell D3 that the selection
"circle" should correspond to data—and describe how to get there. This
concept is called the data-join:
This Venn diagram illustrates the data-join. Data bound to existing
elements produce the update (inner) selection. Unbound data produce
the enter selection (left), and unbound elements produce the exit
selection (right). Data Enter Update Elements Exit Thinking with joins
reveals the mystery behind the sequence:
The selectAll("circle") returns the empty selection, since the SVG
container element (svg) is empty. No magic here.
The empty selection is joined to data: data(data). The data method
binds data to elements, producing three virtual selections: enter,
update and exit. The enter selection contains placeholders for any
missing elements. The update selection contains existing elements,
bound to data. Any remaining elements end up in the exit selection for
removal.
Since the selection was empty, all data ends up as placeholder nodes
in enter().
This is the same append as in the first example, but applied to
multiple placeholders; selection methods implicitly iterate over
selected elements. The missing elements are added to the SVG container
by append("circle").
So that’s it. You wanted the selection "circle" to correspond to data,
and you described how to create the missing elements.
In your example selectAll("rect") is called first. But it returns an empty selection.
data(data) will bind the empty selection with the data. It creates new empty selections.
.enter() identifies any DOM elements that needs to be added when the joined array is longer than the selection.
append("rect") appends a rectangle to each empty selection, which is no longer empty
It is well explained and detailed on this section: D3.js data binding, How it works?
I am creating an FCE for my article content.
I created sections so that I can create every article sub element multiple times in a page and every thing works fine except an image slider.
Here is my mapping :
The difference between other elements and image slider is it contains a section element inside it.
When I add and save content to image slider it simply disappear.
Rendering output shows html elements till the subsection 'Content set'.
How can I get the slider to work?
You have bad maping set:
Image slider -> div (outer)
Content set -> div (inner)
Container -> li (outer)
Image -> img (outer)
My buttons are input type=button, id field set, and no text in between the tags since it appears to the right of my buttons rather than inside. (sorry, won't let me publish the html for some reason).
I .button() them and set their label. All works as expected, but I can't select them by :contains().
How do you select jQuery UI buttons by their labels?
Thanks in advance!
Edit
I don't select by id because the text of the button changes based upon a variable in my db. Is there a way to select by .data?
You should create a button and look how jQuery creates it. When you look at the example in the documentation you see that .button() creates a span element in the button element that contains the label. So you can query on this inner span element which has a class of ui-button-text.
But I think that you should overthink your code and rework it so that you can select on the ID since they are made to identify things.
Edit: Then go for the first advice
var buttons = $('button').filter(function (index) {
$('.ui-button-text:contains("' + your_string + '")', this).length > 0
});
I've got a problem with the css nth-child selector.
I have a grid of 3x3 elemtens inside a container. Those elements have a class called .square.
With .square:nth-child(3n+1) I select every first element of the row and color it green.
With .square:nth-child(3n+3) I select every last element of the row and color it red.
This works fine, until there is any element(<br> for example) that is outputted before the grid. With every new <br>, the order moves up by one, as is the <br> was considered a .square.
As I understand the .nth-child, it should select every third element of the .square class. Why does it apply that to any element, and how can I achieve my inital goal?
Thanks in advance
http://www.hier-krieg-ich-alles.de/shop.php?cat=26491127728
The problem occurs on the boxes in the middle.
Sounds like you want nth-of-type.
Related selectors which you may find useful are :first-of-type, :last-of-type, :nth-last-of-type and :only-of-type.
nth-child working only with html element, nth-child css don't know class and id, if you want set nth-child for class, add some custom attribute for that class using jquery..
like
jQuery('.square:nth-child(3n+3)').attr("act","dummy");
then use css
div[act='dummy']{
border : 1px solid red;}