Select div after parent with jQuery - javascript

<div class="col-1-3">
<div class="click"></div>
</div>
<div class="col-1-3">
</div>
<div class="col-1-2">
</div>
Using jQuery, I need to select the col-1-2 div when a user clicks on the "click" div. I need to replace col-1-2 with col-1-3. So far, I have tried a variety of methods using parent();, next();, find(); etc. etc. Right now, I looking into:
$(".click").parent().next(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
That obviously doesn't work but I am not sure where to go from here.

next will only look at the immediate next element. You need to use nextAll to test all the following siblings.
Using this instead of a selector will make sure that you are dealing with the div that was actually clicked rather than another one with the same class name.
$(this).parent().nextAll(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
You may also wish to filter the results to apply the change to only the first match.

One more slightly shorter version:
$(this).parent().siblings(".col-1-2").toggleClass("col-1-2 col-1-3");
$.fn.toggleClass can be used instead or combination of removeClass + addClass: col-1-2 will be removed and col-1-3 will be added.

Related

Accessing a div with a complex class name

In the code below, I've marked a <div> with "LINE BELOW". I need to set css background attribute but, no matter how I try the syntax in jQuery or JavaScript, it seems like it never recognizes the thing! Why won't it accept my CSS definition?
As a bonus explain to me how to override the existing background attribute that contains !important in it.
This is the approximate scheme of what I have in a target website:
<div id="main-content">
<div id="detailblock">
<div class="tabsblock">
<section class="editblock">
<form id="target">
<div class="editblock-item">
<div class="input textarea">
<div class="editor_box">
//LINE BELOW:
<div class="editor_ editor_text">
//Something inside of div...
</div>
</div>
</div>
</div>
</form>
</section>
</div>
</div>
</div>
I tried this and found during research and it didn't work:
jQuery(".editor_.editor_text").css("background","#000 none repeat scroll 0% 0%");
What am I doing wrong?
UPDATE
I just tested and colored all divs in blue using css(). They all worked, except that particular one. But if I remove all divs using remove(), it will get removed with all divs. But if I remove that particular div using it's selector, it will not get removed!
you're not really selecting a <div> with a complex class name; you're trying to select a <div> with two class names assigned to it. Your jQuery selector does not have to contain both of those class names; either will do, though of course you can specify both if you want. Does $("div.editor_") select the element you want to change? Does $("div.editor_text")?
Once you have figured out the proper selector, you can either call jQuery's .css method on the selected element:
$(...).css("background", "blue");
or you can edit the selected element's style property directly (as in, not through jQuery). If you are attempting to override a CSS !important directive, I believe this is the method you must use:
$(...)[0].style.setProperty("background", "blue", "important");
(this works because two CSS rules are now marked as equally !important, and the order of application dictates that the one you're setting will win out.)
You have a typo here there is an extra space between the two editor:
<div class="editor_ editor_text">
Works fine without the extra space in this fiddle:http://jsfiddle.net/yutzjbjr/
edit
I see now that there are two classes involved. You should include your jquery in the question.
However still works fine with two classes: http://jsfiddle.net/yutzjbjr/1/
Can you maybe read the console?

document.querySelector multiple data-attributes in one element

I'm trying to find an element with document.querySelector which has multiple data-attributes:
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" data-period="current">-</div>
I thought about something like this:
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] [data-period="current"]')
But it does not work.
However, it works well, if I put the second data-attribute in a child-element like:
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"> <span data-period="current">-</span> </div>
So, is there an option to search for both attributes at once?I've tried several options but I don't get it.
There should not be a space between the 2 selectors
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
if you give a space between them it will become a descendant selector, ie it will search for an element attribute data-period="current" which is inside an element with data-point-id="7febe088-4eca-493b-8455-385b39ad30e3" like
<div class="text-right" data-point-id="7febe088-4eca-493b-8455-385b39ad30e3">
<div data-period="current">-</div>
</div>
space in selector looks for [data-period="current"] in[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"] .You don't need to put space in between attribute value selector:
document.querySelector('[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
This is how I came up with a solution for selecting a specific class by multiple dataset attributes.
document.querySelector('.text-right[data-point-id="7febe088-4eca-493b-8455-385b39ad30e3"][data-period="current"]')
What you thought was correct, however you just needed to specify the class you were trying to select.

JQuery "#id.class" Selector Mashup

I have some bullet points which I want to show more text below them on clicking them. They are both two separate Ps that are paired together by sharing a common id. So, what I am trying to do below is to find the element with (id_same_as_this.class), so that the element with the class "expand" as well as the id that matches the clicked on P is toggled. Does that make sense?
$(document).ready(function(){
$(".expandable").click(function(){
$(this.attr('id')+"."+"expand").toggle(800);
});
});
I only ask if the above code could be made to work because it would make the expandable bullet points in my web page significantly less code intensive than a lot of the examples I have read about.
$(this.attr('id')+"."+"expand").toggle(800);
Must be
$("#" + this.id +".expand").toggle(800);
You missed the # there. That said, you shouldn't ever have a common ID. By definition IDs are meant to be unique. If you have the same ID on multiple elements, while it may work now on the browsers you try, you have no guarantee it won't break in the next rev of jQuery (or Chrome, or Konqueror, or iOS Safari). There's also no reason to do it. You could just use classes or data-* attributes.
Yes this will work but you need a # before the ID
They are both two separate Ps that are paired together by sharing a common id.
IDs are unique. Two elements can't share a common ID, as that defeats the whole purpose of having a unique identifier. JavaScript assumes that you're using valid HTML, so document.getElementById() will return only the first element with a matching id. By using non-unique IDs, things will start breaking in unpredictable ways:
$('#foo').find('.bar') // Won't search past first #foo
$('#foo .bar') // Will search past first #foo in IE8+
Try restructuring your HTML to make this task easier. Maybe you could do something like this:
<ul id="bullets">
<li>
<h2>Title</div>
<div>Text</div>
</li>
</ul>
And then use a simple event handler:
$('#bullets h2').click(function() {
$(this).next().toggle(800);
});
You don't need id values for this at all (which is good, as from the comments on hungerpain's answer, you're using the same id value on more than one element, which is invalid).
Just do this:
$(document).ready(function(){
$(".expandable").click(function(){
$(this).find(".expand").toggle(800);
});
});
That will find the element with the class expand within the expandable that was clicked. No relying on unspecified behavior of selectors.
If you really need that data on the expandable, just put it in a data-* attribute. So instead of this invalid structure:
<!-- INVALID -->
<div id="foo27" class="expandable">
<div class="expand">...</div>
</div>
<div id="foo27" class="expandable">
<div class="expand">...</div>
</div>
Do this
<!-- VALID -->
<div data-id="foo27" class="expandable">
<div class="expand">...</div>
</div>
<div data-id="foo27" class="expandable">
<div class="expand">...</div>
</div>
Use the above code to do the expansion. If you need the value, use .attr("data-id") or .data("id") to get it.

jQuery parents then locate a div to hide

Ok, so i've got this .parents() function that goes outside to a located class/id. In my case, (.wrapper).
<div class="wrapper">
<div class="hide">Hide Class</div>
<div class="boxClass></div>
</div>
I've got a list of these div's on a single page, so, if i click the "Hide Class" text, everything would fadeout, since everything in the list, has the same class name. Now, back to my question. I use .parents() to locate (.wrapper) (i know this can be done with (.parent)). But how can i use .parents to go back and then select (fadeOut) a class inside it? EX, boxClass?
In your case, they're siblings, so just use the siblings()(docs) method in the handler.
$(this).siblings('.boxClass').fadeOut();
Or if they're not actually siblings, use the closest()(docs) method then the find()(docs) method.
$(this).closest('.wrapper').find('.boxClass').fadeOut();
Inside a handler this represents the element that invoked the handler. As such, it is a direct reference to the specific .hide element that was clicked.
Something like this?
$('.hide').parents().children('.boxClass').fadeOut();
.children() only travels a single level down the DOM tree. Use find():
$('.hide').parents().find('.boxClass').fadeOut();

Unresponsive OnMouseOver event in a dynamically-generated nested DIV

I am using JavaScript to generate a map for a game, and each tile is a separate div. In order to be able to position the map on my site, I am throwing them all in another div.
So for example:
<div id="mapBox">
<div id="tile" ... ></div>
<div id="tile" ... ></div>
</div>
The #tile divs are generated from data in an XML file, so they're dynamically generated. On each #tile, I have an onmouseevent that triggers a function (alert(1) for now just to get it to work) but it never seems to be triggered.
If I put an onmouseevent on #mapBox it triggers it, but I can't get it to work for the #tile divs.
Any help with this would be appreciated.
Not sure how you're selecting the #tile divs, but it is not valid to have multiple elements with the same ID.
Selection using duplicate IDs will often give you only the first match (or some other unpredictable behavior).
When a duplicate identifier is needed, you should use a class instead of an ID.
<div id="mapBox">
<div class="tile" ... ></div>
<div class="tile" ... ></div>
</div>
First problem, as mentioned, is that you use the same id for many elements, so the event only fires on the first one.
Secondly you should use the .delegate() method on the #mapBox after giving a class on the tiles like this
$('#mapBox').delegate('.tile', 'mouseover', function(e){
//do whatever here
})
example at http://jsfiddle.net/nXa27/1/
Update
Sorry, didn't see you were not talking about jquery..
Here is an example with pure javascript http://www.jsfiddle.net/AvJf7/
Still you will need to add a tile class to your tiles for easy and valid selecting.

Categories