How do I select div that contains "my content"?
<table>
<tr>
<td class="ms-disc-bordered-noleft">
<div class="">
<div>some content</div>
<div>my content</div>
</div>
</td>
</tr>
</table>
what relation does that div has with td.ms-disc-bordered-noleft?
$('.ms-disc-bordered-noleft div:last')
$('.ms-disc-bordered-noleft
div:eq(2)')
$('.ms-disc-bordered-noleft').find('div:eq(2)');
or
$("div:contains('my content'):last");
return the droid...I mean div...you are looking for.
I have a feeling that $('.ms-disc-bordered-noleft div:last') is your best option; my performance test shows that it is generally the fastest of the 4 proposals (FireFox prefers $('.ms-disc-bordered-noleft').find('div:eq(2)');).
See http://jsfiddle.net/jhfrench/cfeZU for examples of the different selectors in use.
As for the second part of your question, that div is a 'descendant' of the td.ms-disc-bordered-noleft element. More specifically, it is the child of the td's child.
One option as second child of inner <div>:
var div = $(".ms-disc-bordered-noleft > div > div:eq(1)");
It's a parent node, you can traverse up an down using .parent() and .children() or .find()
How do I select div that contains "my content"?
$('.ms-disc-bordered-noleft').find('div').contains("my content");
IF I did not understand well your Q. ...you can use:
$('.ms-disc-bordered-noleft div').find('div:last');
^^-parent ^^-first children ^^-last div
Most direct route would be:
var div = $("div:contains('my content'):last");
As far as the relationship to the td goes, you could start with the above and work your way back.
var cell = div.closest('td');
These aren't necessarily the fastest options in terms of performance, but they are the shortest code. And I like short code.
.ms-disc-bordered-noleft div div:nth-child(2)
or
.ms-disc-bordered-noleft div div:last-child
Related
I am newbie in Jquery, sorry for my silly question.
Here is my HTML code :
<tr role="row" class="odd">
<td><input type="checkbox" class="mycheckbox" value="2166"></td>
<td class="sorting_1">2166</td>
<td><span class="myparentid">743</span>
</td><td>0</td>
</tr>
I would like to jump from 'mycheckbox' element to 'myparentid' element, ignoring the tree structure.
In Jquery, I tried something like :
var checkedRow = $(".mycheckbox");
var nextelem = checkedRow.next(".myparentid");
It does not work because next searches only in siblings...
Can you give me a hint ?
Thanks !
The easiest option is to go up to a common parent element (in this case the table row), then back down to the one you want:
$(".mycheckbox").closest("tr").find(".myparentid")
https://api.jquery.com/closest/
https://api.jquery.com/find/
Edit: To add some additional information:
$(".mycheckbox")
is the starting location, it's at: tr>td>input.mycheckbox
(where > means directly below in the html tree)
.closest moves up the tree until it finds a matching parent element, so .closest("tr") will find
<tr role="row" class="odd">
by looking at the direct parent "td", then it's direct parent "tr".
Normally I'd use a class here (<tr class="businessobjectcontainer">) (depending on what the business object is) then it can be a div or tr if you change this part of it later and seeing .odd I'd assume this is for styling and there'll be a .even - so that's not ideal as a selector. So "tr" would have to do.
.find() does the opposite of .closest and goes down the tree looking for a matching element, in this case .myparentid will find: tr>td>span.myparentid
which is what you're looking for.
.find() may not be the most efficient, but it's probably the most flexible as it means you can move the content of your tr around as much as you like.
A move efficient alternative might be to use:
$(">td>span.myparentid", $(".mycheckbox").closest("tr"))
but mostly it's just changing the syntax.
I'm trying to select any divs on a page if a certain child of theirs has any children of its own.
Here's how the structure looks:
<div id="ID-SOME_LONG_ID">
<div class="GK">
<div id="SOME_LONGID_#1434646398866197"></div>
</div>
</div>
So I want to select all divs with id ID-SOME_LONG_ID only if the GK DIV has any children. It may or may not.
ID- stays the same and SOME_LONG_ID changes with each one.
The other one SOME_LONG_ID is the same on as the parent, and after the # it's a 16 digit number that is random.
Would using Regex be a good idea to look for them or maybe using jQuery's .children() like $( ".GK" ).children()?
Thank you!
Use :has(), :empty, and :not()
$('#ID-SOME_LONG_ID:has(.GK:not(:empty))')
However, note, :empty will fail if you want real children without text nodes. In that case you can do
$('.GK').filter(function() {
return $(this).children().length > 0;
});
I need to write a piece of code (I am thinking of JavaScript/jQuery) that would hide the two divs highlighted. The problem is that they do not have IDs and they belong to classes but are not the only objects in those classes. So I cannot hide the classes, because that will hide more things that I want. The "parent" div has an ID.
Please find the code here:
Is there any way I can reference the divs that I want to hide by the order number from the parent? Any other solution would be greatly appreciated.
As I see that those elements are sub child of an element with an id of #view so you can make use of nth- selectors or you can use jQuery :eq()
$("#view > div:nth-of-type(3) > div:nth-of-type(2),
#view > div:nth-of-type(4) > div:nth-of-type(1)").hide()
Or using CSS (Recommended)
#view > div:nth-of-type(3) > div:nth-of-type(2),
#view > div:nth-of-type(4) > div:nth-of-type(1) {
display: none;
}
Here, the first selector i.e #view > div:nth-of-type(3) > div:nth-of-type(2) selects a third div element which is a direct child to an element having an id of #view and further it selects a direct div element which is a second child of that type
Second selector i.e #view > div:nth-of-type(4) > div:nth-of-type(1) selects fourth direct div child element to an element having an id of #view and further, it selects first direct child div
This worked for me If there is no other sibling with same class name.
HTML
<div>
<div class="child"></div>
</div>
<div id="parent">
<div class="child">
</div>
</div>
<button onclick="hideDivs()">Hide</button>
Javascript
function hideDivs() {
var parentDiv = document.getElementById('parent');
var childDivs = parentDiv.getElementsByClassName('child');
for (var i = 0; i < childDivs.length; i++) {
childDivs[i].style.display = "none";
};
}
I am not a fan of coding by position (e.g. the 3rd or 4th element) because relatively minor changes to the markup such as just adding a new div for spacing can break code that relies on specific hard-coded positions.
If you want something that won't break when there are changes to the markup that might change the relative position of items, then you have to look for more specific content that you want to hide. There are many different ways to do this depending upon what you know about the content and what is the best marker to indicate that you have the right div.
Here's one way that looks for unique identifiers in the content you want to hide, then goes up to the proper parent to hide that content:
$("#RoleListTB").closet(".h1r1").hide();
$("#AccessProfileListTB").closest(".h111").hide();
You could use the table's ids to identify the container.
$("#RoleListTB").closest(".hlrl").hide();
closest() is looking up the DOM to the next matching parent, so you can start at your table as shown.
i've made a fiddle for this:
<a href="#" id="toggle" >show/hide</a>
<div>
<div class="hlrl">
<span id="RoleListTB">
RoleList Table
</span>
</div>
</div>
$("#toggle").click(function(){
$("#RoleListTB").closest(".hlrl").toggle();
});
http://jsfiddle.net/NGVQ3/
You could easily do this by using a CSS pseudo-selector in your query.
$('#view').find('div.h1r1:nth-of-type(2)')
or you could just be more specific
.h111+.h1r1
You can use :gt Jquery selector to search by index:
$( ".some:gt(0)" );
0 - is first .some
You can use the :eq selector to select an element at a particular index.
Assume the parent div has an id parent
it had child div's having the class sub.
so if you want to hide the second child element
$("#parent .sub:eq(1)").hide();
since the child ordering starts with `0' index
If you are sure that their positions are fixed and that won't change, then you could use nth-child selector.
Something like this:
$("#view").children("div:nth-child(3)").children("div:nth-child(2)").hide();
$("#view").children("div:nth-child(4)").children("div:nth-child(1)").hide();
Or, just:
$("#view > div:nth-child(3) > div:nth-child(2)").hide();
$("#view > div:nth-child(4) > div:nth-child(1)").hide();
Alternatively, using .eq:
$("#view").children("div").eq(2).children("div").eq(1).hide();
$("#view").children("div").eq(3).children("div").eq(0).hide();
Note: .eq is zero-based.
Divs can have more than one class . . .
<div class="h111">
changed to
<div class="h111 hideDiv">
CSS
.hideDiv {display: none;}
then use javascript to show it when you want it to be shown :)
Your div contains the tables which have a ID. So you can use
$('#yourTableIDHere').parent().hide();
This code will hide your div.
I have three divs. How should I append a div onto an unknown div?
<div class="main" >
<div id="drag-box" >
<div id="" class=""> </div>
</div>
</div>
I want to append div on an unknown div which is come after drag-box div. I don't know which div comes after drag-box div. But there must be one div after drag-box div.
$("#drag-box div:first-child").append("<span />");
or
$("#drag-box div").first().prepend("<span>first</span>");
For a complete answers, here it is working:
http://jsfiddle.net/dMUD3/
try this
$("#drag-box div:first-child").attr("id");
Instead of giving you a one liner I would like to give you an indepth solution.
A browser takes your html and parses what is called a DOM Tree out of it.
so if your html is .
<div class="a">
<div class="foo"></div>
<button class="foogle"></button>
</div>
The tree structure will become something like
`-div.a
|-div.foo
`Button.foogle
You should actually look into DOM Api's at MDN
How DOM helps ?
With DOM api's you can actually access the unknown div using the reference to a known div. So if you actually understand your markup and its representation in DOM it should be pretty simple to get reference to nth child of an element;
You can access the child elements by the children attribute.
So
// Get reference to the element.
var parent = document.getElementById("drag-box");
// Use the dom.
var child_i_want = parent.children[0];
// or there is another way
var child_i_reallyWant = parent.firstElementChild;
There are solutions with jQuery but I feel its important for you to Understand basics of DOM even when there are helpful abstraction libraries in existance.
You'll need the + selector. It applies to the object directly following. See here.
.drag-box + div {
}
$('<div></div>').appendTo($('#drag-box div:first'))
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.