JSFiddle: https://jsfiddle.net/coh1xr77/5/
I need to delete an <LI> DOM Element correctly selected with a Selector based on its exact content. My list contains a set of Time LI's and my choice is to delete the first one in the list, 12:15am, based on the exact text match, when I click the button.
I can see that my selection is correct because I'm getting an [Object] reference in the alert box, rather than "Undefined".
However, the subsequent remove() on this element does nothing: the element remains.
var myselection = '12:15am';
$('#remove').click(function() {
var current = $('.ui-timepicker-list li').filter(function() {
return $(this).text() === myselection;
});
alert('current = ' + current); // This works, element found
$(current).remove(); // This does nothing (or doesn't remove properly)
});
You need to change the condition to check if the li's innerText starts with the selected time string. Like: $(this).text().indexOf(myselection) == 0
Here's the updated fiddle: https://jsfiddle.net/coh1xr77/11/
Update
Considering that all time values have the bracketed relative time strings at the end, you could try splitting based on that bracket (, and compare with the first part of that string. Like: $(this).text().split('(')[0].trim() == myselection
Here's the fiddle with that: https://jsfiddle.net/coh1xr77/12/
Update 2
If you are absolutely certain that the structure of li elements will not change, you could access the text using the childNodes. Like: $(this)[0].childNodes[0].textContent == myselection;
Here's the updated fiddle: https://jsfiddle.net/coh1xr77/14/
Related
I'm trying to set focus on the first input field in an element with class of .search-options that comes next one the page.
This is what I am using, however its not working.
$(document).ready(function() {
$('.toggle-search-options').on('click', function() {
$(this).next('.search-options *:input[type!=hidden]:first').focus();
});
});
This is very similar to this: jQuery: Find next element that is not a sibling, except that the current element doesn't match the selector you are looking for. In that case you simply have to add it to the selection:
// Outside the event handler:
var $elements = $('.search-options *:input[type!=hidden]');
// Inside the event handler:
var $elementsWithCurrentElement = $elements.add(this);
$elementsWithCurrentElement.eq($elementsWithCurrentElement.index(this) + 1).focus();
If the element you are looking for is actually a sibling, have a look at Efficient, concise way to find next matching sibling? .
I didn't understand the need for the colon in front of "input". This worked just fine for me:
$('#test input[type!="hidden"]:first')
But as an alternate solution, why not grab the first in the array of matches?
var inputs = $('#test input[type!="hidden"]');
if(inputs.length > 0) { $(inputs[0]).focus(); }
I have the below code that checks to see if any of my divs has the class "wrong" and if so it shows the jQuery UI dialog box. However i want to extend the code so that it checks those divs and if there are any that are empty it should not show the dialog box.
I've looked around and some people are suggesting using children().length > 0 to accomplish this, but I'm not sure how to write this with my code.
js:
$("#run").click(function() {
if ($("[id^='Drop']").hasClass("wrong")) {
$("#dialog1").dialog("open");
}
});
The following selectors could be used to test if an element is empty or not:
:empty matches elements that have no children (thus, empty)+
:parent matches elements that have children+
Now, rephrasing your statement:
... so that it checks those wrong divs and if
there are any that are empty they are all full it should
not show the dialog box.
You would write:
var $allWrong = $("id[^='Drop'].wrong"),
$notEmpty = $wrong.filter(":parent");
if ($allWrong.length && $allWrong === $notEmpty) {
// show dialog
}
+ Text nodes are counted when counting children. <span> </span> contains a text node which contains a whitespace. Therefore it matches :parent and does not match :empty.
The logic consists of two parts:
Finding elements with id property starting with "Drop" and having the .wrong class.
Checking whether any of those elements are empty.
To do this, I'm saving the first step in an intermediate variable, before doing the final condition:
var $wrongFields = $('[id^="Drop"].wrong');
if ($wrongFields.length && !$wrongFields.filter(':empty').length) {
// at least one field exists with:
// - id starting with "Drop"
// - class of "wrong"
// and none of those fields are empty
$("#dialog1").dialog("open");
}
Demo
This would also work
$("#run").click(function(){
if ($("[id^='Drop']").hasClass("wrong") && $("[id^='Drop'].wrong:empty").length ) {
$( "#dialog1" ).dialog( "open" );
}
});
I'm trying to get my head around jQuery, but I have trouble figuring out plain arrays vs jQuery arrays, and DOM elements vs jQuery elements.
So here's an example I try to do. The example is simple really, but I need some hand-holding :-p so I'll be verbose in my requirements hoping that the answers will be, in turn, descriptive.
I have two <select> drop-downs, with IDs #version and #target.
When I click a button, I want to select in #target the option following with the same name as the last-but-one value in #version. (the item WILL exist)
Example: #version has options: a,b,c,x. #target has options a,b,c,d,h,m.
I click the button. What should happen is:
read the last-but-one option in #version: "c"
find the option with the same name in #target: the 3rd (i.e. index is 2)
set the selected value in #target to the one after "c", i.e. "d" (the 4th, index 3)
Here's a fiddle with the example.
For the 1st step, I think I figured it out:
var latestVersion = $("#version option").get(-2).text;
//side-note: why does .text work but not .val() ? oh, .get() returns a DOM element
// so How do I get back to a jQuery element?
// $($("#version option").get(-2)).val() works but looks ugly
For step 2, I tried this:
var target = $("#target option:contains(latestVersion)");
but it doesn't work. And there's GOT to be a better way than manually iterating all the values searching for the right one.
Step 3: ??.
Using 1st step as you figured try the following:
$('#button').click(function(){
var latestVersion = $("#version option").get(-2).text;
//index of LAST-BUT-ONE
var target=$("#target option[value="+latestVersion+"]").index();
//Setting next index value
$("#target").prop("selectedIndex",target + 1);
});
http://jsfiddle.net/GpBDY/16/
.val() does not work on an option element, but it does work on a select element:
var v = $( "#version" ).val();
gives you the element selected in the dropdown #version.
The following line will not do what you want:
var target = $("#target option:contains(latestVersion)");
That is because latestVersion is treated as the value "latestValue" and not as the name of a variable. To use the value of the variable latestValue, put latestValue outside the string like:
... contains(" + latestVersion + ")...
You might be interested in the jQuery method .next() in combination with your code in step 2 to get the value of the next option element. Be aware that if there is no next element, the value will be "undefined".
You can do this using nth-child to select value of version and using that set the value of target this way:
$('#button').click(function(){
var latestVersion = $("#version option:nth-child(3)").text();
$("#target").val($('#target option[value="'+latestVersion+'"]').next().text());
});
Demo Fiddle
i am not sure i understand you are looking for, but i think that you want something like this:
$('#button').click(function(){
var arrVersion = $("#version option");
var latestVersion = $(arrVersion[arrVersion.length - 2]).val();
$("#target").val(latestVersion);
var actualSelected = parseInt($("#target").prop("selectedIndex"));
$("#target").prop("selectedIndex", actualSelected + 1);
});
http://jsfiddle.net/GpBDY/9/
I am trying to check if the current clicked text has the same data as any other text on the page as the below text is put on the page twice. Once the text has be clicked it will add a class (this bit is working) and if it also has the same data as any other text on the page then that text will also be given the new class.
<span class="AJAXPagerSpan" data-num="6">6</span>
<span class="AJAXPagerSpan" data-num="12">12</span>
<span class="AJAXPagerSpan" data-num="24">24</span>
$(".AJAXPagerSpan").click(function() {
<%= this.ID %>_Pager.ChangeResultsPerPage($(this).html());
// Check if any of its siblings are part of the "highlightclass" and remove them from it
$(this).siblings().removeClass("highlightclass");
if ($(this).data() == $(this).siblings().data()) {
$(this).addClass("highlightclass");
};
// Add it to the highlightclass
$(this).addClass("highlightclass");
});
$(".AJAXPagerSpan").click(function () {
$(".highlightclass").removeClass("highlightclass");
$("span[data-num=" + $(this).data("num") + "]").addClass("highlightclass");
});
Your code has the following problems:
You were missing the argument to .data() to specify the name of the data.
You were missing parentheses around the if condition.
You need to test each sibling separately. When used with a collection, .data() just returns the value from the first element of the collection. You could have used a .each() loop.
Rather than looping, I used a selector that matches the data attribute.
FIDDLE
I'm not even sure I'm asking or going about this the right way but it's probably easier if I just show it. Basically, I'm trying to have run an attr of each div as a parameter through a function and have it return a different result based on that div's attr.
The example, as you can see, is a group of dropdowns that appear when you click on a link in the container div. If you make a selection it saves that as a attr in the parent div. The problem arises when you click out, then back in on the container ... instead of reshowing each dropdown with the appropriate default or selection showing, it just mirrors the result of the a next to it.
http://jsfiddle.net/nosfan1019/b7F6x/5/
TIA
I inserted some console.log() statements to see what was happening with your various jQuery selectors. I observe the following:
when I click in the first "click" node, _container is "top one"
thus in your iteration of the three divs, you select both divs with class 'dd' contained in the div with class 'top one'
the parameters _attr and _parent that you pass to your function select() are the same for each node that is processed, giving the same result for both 'dd' boxes.
I think you want to change the selectors you use to locate the nodes to modify.
foo = foo.find('.dropdown-toggle').html(_new + '<b class="caret"></b>');
with this line you get two divs and hence you've change both values(in case the value was chosen from the droplist).
To restore selected values correctly:
function modified(_select) {
console.log("modify");
foo = $('#box').html();
foo = $(_select).html(foo);
// iterate on collection to restore selected value from selection tag;
foo.filter("div[selection]").each(function(i, v){
var selected = $(v).attr('selection');
$(v).find('.dropdown-toggle').html(selected + '<b class="caret"></b>');
});
}
Then, it's needed to be checked if any of parentDiv has [selection] attr:
if($(y).filter("div[selection]").length > 0){
return modified(y);
}
http://jsfiddle.net/b7F6x/50/