How select the selector from its method? - javascript

I need to change the text of '#foo #three' using 'this' to get the text of the div#one
The output I need is:
cat
dog
cat
Html:
<div id="foo">
<div id="one">cat</div>
<div id="two">dog</div>
<div id="three">mouse</div>
</div>
JS:
$("#foo #three").text($(this).parent().children().first().text());
I need this code dynamically
http://jsfiddle.net/Kodam/s466a31q/

Unless you are trying to do this dynamically, this is as simple as:
$('#three').text($('#one').text());

$("#three").text($('#foo').children().first().text());
Update: If you really want to use this to reference the match, would recommend to use each:
$("#foo #three").each(function(){ // this only matches #three
$(this).text($(this).parent().children().first().text());
})

Though this approach uses a kind of workaround, it works:
$jSelect = $("#foo #three");
$jSelect.text( function(){
var jParts = $jSelect.selector.split(" ");
return $(jParts[0]).find("div:first").text();
});
Fiddle
But I wouldn't recommend it as .selector is deprecated as of jQuery 1.7 and only maintained for supporting live() in the jQuery Migrate plugin.
For Reference: http://api.jquery.com/selector/
Update: And a similar approach without using .selector:
jSelect = ("#foo #three");
$(jSelect).text( function(){
var jParts = jSelect.split(" ");
return $(jParts[0]).find("div:first").text();
});
Fiddle

if you insist on using this, you can do it this way:
Fiddle Example
basically, since this only works inside a function context, you create a function that returns a string and put it inside the .text().
$(function () {
$("#foo #three").text(function () {
return $(this).parent().children().first().text();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
<div id="one">cat</div>
<div id="two">dog</div>
<div id="three">mouse</div>
</div>

Related

Call function with current reference in jquery template

I have a div in jquery template and I want to call a javascript function from template. e.g.
My div in jquery template is as follows:
<div class="div1" ${makeContainer(this)}>
</div>
'makeContainer' is a function in javascript. I am unable to pass the reference of current element i.e. 'div1' in 'this' parameter.
Please help
You can select all div with class div1 and call function for each element.
$('.div1').each(function(){
makeContainer($(this));
});
So in html you can just use
<div class="div1"></div>
Not sure about your requirement. Do you mean to pass the reference of div?
Anyway I have created a demo which may be useful to you
HTML
<div id = "div_1" onclick="myDemoFunc(this)">Hello
</div>
JS
function myDemoFunc(elem){
var getElem = elem;
var id= getElem.id;
alert(id);
}
WORKING COPY
Try this:
<div class="div1"></div>
And JS Code:
<script type="text/javascript">
$(document).ready(function(){
$('.div1').each(function(){
makeContainer($(this));
});
});
function makeContainer(value)
{
console.log(value);
}
</script>

How to get sibling element (div) in Javascript?

So I have this HTML:
<div class="tip-box">
<div class="tip-title" onclick="toggleTip()">
<h2>Tip 1</h2>
</div>
<div class="tip-content hidden">
<p>Tip 1 content</p>
</div>
</div>
And this Javascript:
function toggleTip() {
$(this).siblings(".tip-content").toggleClass("hidden");
}
Hopefully it's obvious what this is supposed to do, but it doesn't work. Using .siblings() just doesn't seem to work in this way.
What's the correct solution for this? To get the next sibling of a certain type or with a certain class and then hide/show it?
You can use Jquery function.
<div class="tip-box">
<div class="tip-title">
<h2>Tip 1</h2>
</div>
<div class="tip-content hidden">
<p>Tip 1 content</p>
</div>
</div>
$(document).ready(function(){
$('.tip-title').click(function(){
$(this).siblings(".tip-content").toggleClass("hidden");
});
});
you can also use this
<div class="tip-box">
<div class="tip-title" onclick="toggloTip(this)">
<h2>Tip 1</h2>
</div>
<div class="tip-content hidden">
<p>Tip 1 content</p>
</div>
</div>
<script>
function toggloTip(elm) {
$(elm).siblings(".tip-content").toggleClass("hidden");
}
</script>
You can use pure javaScript with nextElementSibling property of node something like below,
I suppose you want do this operation with siblings.
function getChildrens(n, selector) {
var nodes = [];
while (n.nextElementSibling != null) {
if (n.nextElementSibling.hasOwnProperty('classList')) {
if (n.nextElementSibling.classList.contains(selector)) {
//return n.nextElementSibling;
nodes.push(n.nextElementSibling);
}
}
n = n.nextElementSibling;
}
return nodes;
};
function getSiblings(n, selector) {
return getChildrens(n, selector);
}
function toggleTip(elem) {
var siblings = getSiblings(elem, "tip-content");
if (siblings.length > 0) {
for (var i = 0; i < siblings.length; i++) {
siblings[i].classList.toggle("hidden");
}
}
}
.hidden {
display: none;
}
<div class="tip-box">
<div class="tip-title" onclick="toggleTip(this)">
<h2>Tip 1</h2>
</div>
<div class="tip-content hidden">
<p>Tip 1 content</p>
</div>
</div>
Here is another non JQuery answer.
To get the next element sibling use:
var nextElement = element.nextElementSibling;
To get the previous element sibling use:
var previousElement = element.previousElementSibling;
To get the element index use:
var index = Array.prototype.slice.call(element.parentElement.children).indexOf(element);
If you are at the first element the previousElementSibling value will be null.
If you are at the last element the nextElementSibling value will be null.
How about this JavaScript:
$(function(){
$('.tip-box').on('click', '.tip-title', function(){
$(this).next('.tip-content').toggleClass('hidden');
});
});
Remove the idea of working with onclick attributes when you use jQuery.
None of the previous answers, not even that serial-upvoted one ;), actually explains the problem and why their solutions work.
The problem is that an inline onclick handler does not pass on its current context. Inside the onclick="" JavaScript code this is the element clicked. Once you call a global function (like your toggleTip), that context is lost. The this the function receives is window and not the element.
The usual quick fix, for raw JavaScript code, is to pass this as a parameter to the global function.
e.g.
onclick="toggleTip(this)"
and receive a parameter in the function like this:
function toggleTip(element) {
$(element).siblings(".tip-content").toggleClass("hidden");
}
However, as you are using jQuery, inline event handlers are actually a bad idea. They separate the event registration from the event handler code for no reason and do not allow for multiple event handlers, of the same type, on the same element. They also bypass the rather cool event bubbling system jQuery uses.
The preferred alternative, with jQuery, is to use jQuery to select the element and jQuery to connect the event in one step:
jQuery(function($){
$('.tip-title').click(function(){
$(this).siblings(".tip-content").toggleClass("hidden");
});
});
As you only want the element that follows, and potentially will add more pairs, the better option would be using nextAll and first(), with the same jQuery filter, instead of siblings:
e.g.
jQuery(function($){
$('.tip-title').click(function(){
$(this).nextAll(".tip-content").first().toggleClass("hidden");
});
});
Or, of you can guarantee it is the next element, use next as #Tim Vermaelen did (with or without the selector makes no difference, so might as well leave it out):
jQuery(function($){
$('.tip-title').click(function(){
$(this).next().toggleClass("hidden");
});
});
Note: In this example jQuery(function($){ is a DOM ready event handler which is the rather handy shortcut version of $(document).ready(function(){YOUR CODE});, which also passes a locally scoped $ value. For those that mistake this code for an incorrect IIFE, here is a working example: http://jsfiddle.net/TrueBlueAussie/az4r27uz/

jQuery selector that excludes a subtree of the DOM

Is there a jQuery selector that will grab all elements of class A that are not descendants of class B?
Example:
<body>
<div class=report-value id=overview></div>
<div class=panels>
<div class=report-value id=sales></div>
<div class=report-value id=training></div>
<div class=report-value id=hr></div>
</div>
<div class=report-value id=summary></div>
</body>
For the above example, the need is to select all .report-value elements that are not descendants of the .panels element. The report values are computationally heavy and need to be calculated only when actually displayed.
Something like:
var elems = $('.report-value:excludeTree(.panels)');
which would return a jQuery object containing only #overview and #summary.
Performance is important for this web application.
You can use .not() filter out those elements
$('.report-value').not('.panels .report-value')
Demo: Fiddle
Try,
var elems = $('.report-value').filter(function(){
return $(this).closest('.panels').length ==0;
});
DEMO
var allpanels=$('body>.report-value');
$('body > .report-value')
or
$('.report-value').each(function(){
if(!$(this).parent().hasClass('.panels'))
{
//use query
}
});
Try this:
$('.report-value').each(function(){
if(!$(this).parent().hasClass('panels') && !$(this).parents().eq(1).hasClass('panels'))
{
console.log($(this));
}
});
It console only ur required divs

Adding removed attributes back on hover method

have used the following code to remove the style and id attributes from my html, but I would like them to come back once the visitor moves to another element. I'm fairly new to jQuery and have no idea how to achieve that. I would really appreciate somebody's help.
<div class="base" style="background-image: url(img/3.jpg);">
<div id="overlay"></div>
</div>
<script>
$('.base').hover(function(){
$(this).removeAttr('style').children().removeAttr('id');
}, function(){
$(this).addBack();
});
</script>
You have a wrong idea of what addBack() does, anyway the best here might be to use CSS classes.
Something like:
$('.base').hover(function(){
$(this).addClass('myClass');
}, function(){
$(this).removeClass('myClass');
});
Example
The part of the code where you remove the ID is irreversible, so I would find a alternative behaviour/solution there...
Something like this should work :
<div class="base" style="background-image: url(img/3.jpg);">
<div id="overlay"></div>
</div>
<script>
$('.base').hover(function(){
var $this = $(this);
$this.data('style', $this.attr('style')).removeAttr('style').children().each(function(){
var $this = $(this);
$this.data('id', $this.attr('id')).removeAttr('id');
});
}, function(){
var $this = $(this);
$this.attr('style',$this.data('style')).removeData('style').children().each(function(){
var $this = $(this);
$this.attr('id', $this.data('id')).removeData('id');
});
});
</script>
Basically we are storing attribute values in jQuery data arrays. I didn't test it but it should work, I've used this approach more than once..
Updated the code, and here is a working jsfiddle example

.is(':visible') does not work in jQuery

I use .is(':visible') method in jquery but it does not work as expected.
Here is my code snippet
What did I miss there?
HTML:
<div class="str">
<ul><li>1</li><li>hide</li></ul>
<ul><li>2</li><li>hide</li></ul>
<ul><li>3</li><li>hide</li></ul>
<ul><li>4</li><li>hide</li></ul>
<ul><li>5</li><li>hide</li></ul>
<ul><li>6</li><li>hide</li></ul>
<div class="length"></div>
</div>
jQuery:
$(function(){
$('.str ul').find('a').live('click',function(){
$(this).closest('li').parent().hide();
var ll= $('.str').find('ul').each(function(){
$('.length').text( $('.str').find('ul').is(':visible').length );
});
});
});
Use: $('.str').find('ul:visible').length
jsFiddle demo
$(function(){
$('.str ul').on('click','a',function(){
$(this).closest('li').parent().hide();
var visibleUL = $('.str').find('ul:visible').length;
$('.length').text( visibleUL );
alert(visibleUL );
});
});
While .is() returns a boolean value ( true / false ), the :visible selector targets the desired elements creating an elements array collection - exactly what you need to return a valid array length
The .is() method returns true or false
From the docs:
Unlike other filtering methods, .is() does not create a new jQuery object.
You should use find() or filter() not is().
is(':visible') returns a boolean, not a jQuery object:
// Wrong
if ($selector.is(':visible').length) {
// Right
if ($selector.is(':visible')) {
I would change that weird HTML to an actual list, not a bunch of lists with one item each :
<div class="str">
<ul>
<li>1<br>hide</li>
<li>2<br>hide</li>
<li>3<br>hide</li>
<li>4<br>hide</li>
<li>5<br>hide</li>
<li>6<br>hide</li>
</ul>
<div class="length"></div>
</div>​
And then do:
$(function() {
$('a', '.str ul').on('click', function() {
$(this).closest('li').hide();
$('.length').text($('.str ul li:visible').length);
});
})​;​
FIDDLE

Categories