Hello I've got a little problem with this code:
if($(actualFilter + ' .select2-container ul .select2-search-choice div').html() === data) {
$(this).parent() // and now I want to search for "a"
});
Is it possible to somehow set this code in if as this?
Because if I want to go up with parent() and then when I am in .select2-search-choice in this I want to search for a to do click().
I believe what you are looking for is the jquery next and trigger functions.
if($(actualFilter + ' .select2-container ul .select2-search-choice div').html() === data) {
$(this).parent().next("a").trigger( "click" );
});
this or $(this) is available in events like
$('div').click(function(){
alert(this.tageName); //will print DIV for you
});
In if statement you have to simply reuse the selector like
var yourElement = $(actualFilter + '.select2-container ul .select2-search-choice div');
if(yourElement.html() === data) {
var parentEl = yourElement.parent();
});
Related
$("input").on("keypress",function(e){
if(e.which===13){
$("ul").last().append("<li>"+$(this).val()+"</li>");
}
$("li").on("click",function(){
$(this).toggleClass("striked");
});
$("li").on("mouseenter",function(){
$(this).css("color","green");
});
});
$("li").on("click",function(){
$(this).toggleClass("striked");
});
$("li").on("mouseenter",function(){
$(this).css("color","green");
});
$("#slide").on("click",function(){
$("input").slideToggle();
});
Here, I have used the onClick event on<li> to apply the striked class two times just to make it work for both dynamic and non-dynamic elements on the page. But the code is replicated and seems long. Is there any way to shorten so that I can write it once and it gets activated for both types of elements?
Use event delegation instead, on the ul, so you only have to set up listeners once, rather than setting up multiple listeners for every element on load and on each .append. Also, save the ul and the input jQuery-wrapped elements in a variable once rather than selecting them and wrapping them with jQuery each time they're used:
const $ul = $("ul");
const $input = $("input");
$input.on("keypress", function(e) {
if (e.which === 13) {
$ul.last().append("<li>" + $(this).val() + "</li>");
}
});
$ul.on("click", 'li', function() {
$(this).toggleClass("striked");
});
$ul.on("mouseenter", 'li', function() {
$(this).css("color", "green");
});
$("#slide").on("click", function() {
$input.slideToggle();
});
A rather generic approach would be to capture the click event and check if it is from ul
document.body.onclick = function(e){
e = e || event;
var from = findParent('ul',e.target || e.srcElement);
if (from){
/* it's a link, actions here */
}
}
//find first parent with tagName [tagname]
function findParent(tagname,el){
while (el){
if ((el.nodeName || el.tagName).toLowerCase()===tagname.toLowerCase()){
return el;
}
el = el.parentNode;
}
return null;
}
now you can change the tagName passed to the findParent function and do accordingly
Read Here
You can try using the jquery all selector $('*'). For more information on this see
https://api.jquery.com/all-selector/.
Or you can add a specific class to every element you want to have an onClick action.
I have a list view in html which has headers and child elements. I have implemented jquery script to filter the header and child elements, but the problem is when I search the child elements, I get that specific child element with other elements in it also. The actual result should be (suppose I search "xxx" in the searchbox, the output should be the header element and the child-xxx element only which is not happening). I get the xxx result with other child element-aaa also. Please help. I have attached the jsfiddle link "My Test Fiddle"
$("#search").keyup(function(){
var SEARCHWORD = this.value;
$("#list li").each(function(){
if($(this).
text().toUpperCase().
indexOf(SEARCHWORD.toUpperCase()) >=0)
$(this).show();
else
$(this).hide();
});
});
I've modified your fiddle to include a combination of CSS and JS to accomplish what you want. One of your complications is that you want the header to show if any of the siblings match. So you cannot hide the header based on a non-match because there may be a different sibling match.
Second is that multiple siblings could potentially match. This means you can't just show/hide siblings based on a match. If both siblings match you need to show both, and any code that hides siblings could potentially hide a previous match.
I've added CSS code to do the showing/hiding based on matches and the event that the user is searching something (so clearing the box will reshow everything). Then the JS just sets or removes the 'hit' class.
#list.searching h3, #list.searching li > p { display: none }
#list.searching li > p.hit, #list.searching li.hit h3 { display: block }
The JS
var theList = $('#list');
$("#search").keyup(function(){
var SEARCHWORD = this.value;
// remove all hits each time
theList.find('.hit').removeClass('hit');
if (SEARCHWORD) {
// if a search term make sure the list is marked
theList.addClass('searching');
} else {
// remove searching mark
theList.removeClass('searching');
}
$("#list li p").each(function() {
// case-insensitive matching
if (this.innerText.toLowerCase().indexOf(SEARCHWORD.toLowerCase()) > -1) {
$(this).addClass('hit').parent().addClass('hit');
} else {
$(this).removeClass('hit');
}
})
});
Here is the updated fiddle http://jsfiddle.net/gS4AS/4/
Try this:
$("#search").keyup(function () {
var SEARCHWORD = this.value;
$("#list li").each(function () {
$(this).hide();
$('p:contains(' + SEARCHWORD + ')').closest('li').show();
$('p:contains(' + SEARCHWORD + ')').show().siblings('p').hide();
if (SEARCHWORD == "") {
$('#list').find('p:hidden').show();
}
});
});
Fiddle
You have to add this condition to show back the hidden elems:
if (SEARCHWORD == "") {
$('#list').find('p:hidden').show();
}
Updated Fiddle
As per your latest dom structure with tables and tds update to this code:
$("#search").keyup(function () {
var SEARCHWORD = this.value;
$("#list tr").each(function () {
$(this).hide();
$('td:contains(' + SEARCHWORD + ')').closest('tr').show();
if (SEARCHWORD == "") {
$('#list').find('tr:hidden').show();
}
});
});
Updated Fiddle with table structure.
I need help regarding settimeout function.
I made a little plugin, that append 'li' based on specifix parameter.
Like
div ({'div':'noo','auto':'true','pos':'top','txt':'hello'});
function div(obj) {
obj.div;
obj.auto;
obj.pos;
obj.txt;
obj.time;
if(obj.pos == 'top') {
$('<ul id="top"></ul>').appendTo('body');
}
if(obj.pos == 'bottom') {
$('<ul id="bottom"></ul>').appendTo('body');
$(obj.div).append('<li data-name="' + $.now() + '">' + obj.txt + '</li>');
if(!obj.time) {
obj.time = 6000;
}
if(obj.auto == 'true') {
setTimeout(function () {
$(obj.div + ' li').fadeOut();
}, obj.time);
}
}
}
Now, the problem with this code is, if I append a li after few seconds setTimeout (function (){div ({'div':'bottom','auto':'true','pos':'bottom'});}, 3000);, than both LIs fadeout at same time (obj.time).
I want that, all appended LIs must complete their respective obj.time before fadeout.
I also tried to add attr "data-name" on all appended LIs with current time, but dont know how to store all data-name and retrive then into setTimeout function.
Sorry for typo mistakes
JavaScript is case sensitive so avoid using If instead of if, Function instead of function and SetTimeout instead of setTimeout first.
There are 10 li elements and 5 of those have a element inside. And I'd like to add an event on the li elements using Mootools.
A class has few variables and method including the event for the li elements and my problem comes from here. please see the event for li below,
li.addEvents({
mouseover: function(e){
console.log(this.id + ' / ' + this.classVar);
}.bind(this)
});
In the event I need to refer li itself and a class variable because each li has unique id and the classVar has also information. But problem is if I use bind(this) to the event, this.id won't work or if not using it, *this.classVar' won't work.
If I use e.target.id instead of this.id, it returns correct id IF ONLY the li doesn't have a element. Otherwise e.target refers the a element.
Can anyone help me on this please? Many thanks in advance
The simplest way is to use the self or me workaround, like so...
function myClass()
{
var self = this;
this.classVar = 'foo';
// some other code
li.addEvents({
mouseover: function(e){
console.log(this.id + ' / ' + self.classVar);
}
});
}
Trying to get a div that looks like <a id="thumblink-10"> to show and hide another div on hover, but no luck.
jQuery(document).ready(function() {
jQuery(document).find("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).show();
}, function(){
//var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + this.num).hide();
});
});
Thanks
This should work for you:
jQuery("a[id^='thumblink-']").live('hover', function(){
var num = this.id.split('-')[1];
jQuery('#thumb-hover-' + num).toggle();
});
Fixed the initial selector to not use find, only need to supply and single function for the hover and use the toggle function to show/hide the content.
http://jsfiddle.net/Zy2Ny/
But the way I would actually do it is to add data attributes to your links (can then change the selector to a class one instead) and use those to find the correct div to toggle like this:
JS
jQuery("a.thumblink").live('hover', function(){
var num = $(this).data('contentid');
jQuery('#thumb-hover-' + num).toggle();
});
HTML
<a class="thumblink" data-contentid="10">Hover</a>
<div id="thumb-hover-10" style="display: none;">Content</div>
http://jsfiddle.net/Zy2Ny/1/
You can't really do traversal methods like find and then use live. You should just use a standard selection. Also, you can't use live with hover and give two functions.
$("a[id^='thumblink-']").live('hover', function(){ // simple selector
Better still would be to use delegate and a map of events and handlers:
$(document).delegate('a[id^="thumblink-"]', {
mouseenter: function() {
},
mouseleave: function() {
}
});
I haven't been able to test it unfortunately, but I believe the following should work:
var id = 10;
$('#thumblink-' + id).hover(function(id) {
return function () {
$('#thumb-hover-' + id).show();
};
}(id),
function(id) {
return function () {
$('#thumb-hover-' + id).hide();
};
}(id)
);