My HTML code structure like this
<div id="content">
<div> //start
<div id="title"></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div> //end
<div>
<div></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
.....more.....
</div>
.....more div like above....
</div>
I want to use a piece of JQuery code to hide everything except the "div" has id="title"(keep the code from //start to //end).
Now, my JQuery code is:
$("div:not(:has(#title))").hide();
It shows "div id="title"""div"", but it also hide the several "div" after "div id="title"""div"". Again, I want to keep the code from //start to //end. Please help me, thanks.
If your goal is to hide the siblings of the div that contains the #title element, then:
$("#title").parent().siblings().hide();
$("#title") - find the element with the id "title"
.parent() - go up to its parent
.siblings() - get the siblings of the parent
.hide() - hide them
Related
I looked at jQuery selector for an element that directly contains text?, but the suggested solutions were all quite involved.
I tried to select the second div, which contains some text as below.
<div>
<div>
mytext
</div>
</div>
The jQuery command:
$('div:contains("mytext")').css("color", "red)
Unfortunately this also selects (makes red) all the parent divs of the div that I would like to select. This is because :contains looks for a match within the selected element and also its descendants.
Is there an analogous command, which will not look for a match in the descendants? I would not like to select all the parent divs, just the div that contains the text directly.
Well the probem is that $('div:contains("mytext")') will match all divs that contains myText text or that their child nodes contains it.
You can either identify those divs with id or a class so your selector will be specific for this case:
$('div.special:contains("mytext")').css("color", "red");
Demo:
$('div.special:contains("mytext")').css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="special">
mytext
</div>
</div>
Or, in your specific case, use a resitriction in your selector to avoid the divs that has child nodes with :not(:has(>div)):
$('div:not(:has(>div)):contains("mytext")').css("color", "red");
Demo:
$('div:not(:has(>div)):contains("mytext")').css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
mytext
</div>
</div>
You can find the target div with find() method in jQuery.
Example:
$('div').find(':contains("mytext")').css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
mytext
</div>
</div>
Edit:
Following example with filter() in jQuery.
$('div').filter(function(i) {
return this.innerHTML.trim() == "mytext";
}).css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
test2
<div>
test
<div>
mytext
</div>
</div>
</div>
I want to make an HTML element reference like this
<html> X
- description -
<head> X
- description -
<body> X
- description -
The description of the element is hidden by default so when I click on the "X" or the DIV that contains that element description, the description shows up or hide when I click it again.
This is my HTML code:
<h1>HTML Reference</h1>
<div id="reference-list">
<div class="list-element"><html></div>
<div class="element-desc">Here's go description</div>
<div class="list-element"><head></div>
<div class="element-desc">Here's go description</div>
</div>
I tried with jQuery but I dont know how to select the specific div containing the description of that element, since all the divs have the same class (otherwise I will have to create 100 class for each HTML element).
What I tried is this:
<script>
$(document).ready(function(){
$(".list-element").click(function(){
$(".element-desc").toggle();
});
});
</script>
This doesn't work since it show/hide the description of all the elements on the site.
You can use .next() if thats is the correct position of your element.
$(document).ready(function(){
$(".list-element").click(function(){
$(this).next().toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>HTML Reference</h1>
<div id="reference-list">
<div class="list-element"><html></div>
<div class="element-desc">Here's go description</div>
<div class="list-element"><head></div>
<div class="element-desc">Here's go description</div>
</div>
You're selecting all the element descriptions with the $(".element-desc") selector. Try doing this instead:
$(document).ready(function(){
$(".list-element").click(function(){
$(this).next().toggle();
});
});
Using next selects the next element. Basically you want to make your selector more specific and using next is one example of how to do so
I have a little problem here, as jQuery seems to be 'too smart'.
In my HTML-code, I want to insert this string into a div-container:
</div><div class="something">
As you see, first is the closing-tag, second is the opening tag.
That is because I want to cut one big DIV into pieces.
I tried it with jQuery, which I prefer:
$(this).children('.abc').each(function(j){
if( (j+1) % 3 == 0){
$(this).after('</div><div class="abc">');
}
});
I am counting sub-containers and after each three containers I want to cut the parenting container.
Unfortunately jQuery ignores the </div> and puts a closing tag to the <div>. So the result is <div class="abc"></div>.
How do I tell jQuery to insert the string, that I want without any own semi-intelligent parsing?
If you want to cut one div into two, you may be better off replacing one with two rather than trying to be smart and inserting a closing </div> and an opening <div>.
$('.one').replaceWith('<div class="two">two</div><div class="three">three</div>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">I am one</div>
You can, of course, transfer any content to the new div's as appropriate.
Working Fiddle
Although what you're doing is logically correct, it is not always preferred in terms of implementation. You have to look around for certain ethos that are defined by library.
In case of jQuery that ethos is defined by the .wrapAll API.
You can try something like this.
If I understand your question correctly, what you're trying to do is convert
<div class="abc">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Into
<div class="abc">
<div class="something">
<div></div>
<div></div>
<div></div>
</div>
<div class="something">
<div></div>
<div></div>
<div></div>
</div>
</div>
Wrap it like
var divs = $("div.abc > div");
for(var i = 0; i < divs.length; i+=3) {
divs.slice(i, i+3).wrapAll("<div class='something'></div>");
}
I am not sure about this, but just try it like
$(this).children('.abc').each(function(j){
if( (j+1) % 3 == 0){
$(this).after('</div>');
$(this).after('<div class="abc">');
}
});
or vice versa
To select the specific <div> (for e.g the <div> commented as <!-- This one!)Please note all of <..> elements are unknown elements at all levels, BUT NO <div>'s.
<div></div>
<div class="class1">
<..>
<..></..>
<div></div>
<div></div>
<div> <!-- 3rd-child div, of its parent -->
<..></..>
<..>
<div></div>
<div></div> <!-- This one! The 2nd-child div, of its parent -->
<div></div>
</..>
</div>
<div></div>
</..>
</div>
In this scenario, the only logic i can think is:
ONLY the element type as <div>s and the nth numbers (among siblings) are KNOWN.
Middle elements are unknowns. Can be <p> or <table> or <ul> whatever, but not <div>s again.
Levels are unknown.
So:
The target <div> is recursively located under the div#class1
It is the 2nd <div> inside the 3rd <div> of div#class1
How can i get it?
Sorry everyone, i have my own answer already:
$("div.class1 div:eq(2) div:eq(1)").html()
I have a group of nested divs
<div id="myDivs">
<div>
<div>
<div></div>
</div>
<div></div>
<div></div>
</div>
</div>
Using jquery, how do I select the div that is immediately beneathe myDivs, but NONE of it's children?
thnx!
Use the child selector: $('#myDivs > div')
Since the first element is an id selector, the following way will faster. But only noticed the difference in a very complex document.
$('#myDivs').find('div')