Develop Reference

How to remove a href that is listed under div tag?

I'm modifying a part of my wordpress theme and I have come across an issue. I want to remove the ability to click on a link though I do not have the ability to modify the class names or set ID tags
HTML:
<div class="one">
foobar.com
</div>
I have tried to remove the functionality by writing this JavaScript:
document.getElementsByClassName("one")
.getElementsByTagName("a")
.removeAttribute("href");
However this method does not work, am I doing something wrong?

You can use css.
.one a {
pointer-events: none;
}
and you can also remove the hand cursor by adding cursor: default;

document.getElementsByTagName("a")[0].removeAttribute("href");
<div class="one">
foobar.com
</div>
No need to target .one first. Just target by getElementsByTagName but remember that this returns an array of elements, so you need to reference the index of the element you want to remove.
document.getElementsByTagName("a")[0].removeAttribute("href");

If you need to select only the links in the "one" class, you'll need to index into what you get back from getElementsByClass then call children and index into that:
document.getElementsByClassName("one")[0].children[0].removeAttribute("href")

You can do it this way:
document.getElementById("text").onclick = function(){
var clickStatus = true; // Change this to true if you want to enable the link.
if (clickStatus){
window.location = "http://foobar.com";
}
}
<div class="one">
<section id="text">foobar.com</section>
</div>

It will generate Type Error because getElementsByClassName function will return a node list not a single node so you will need to do the following:
document.getElementsByClassName("one")[0]
.getElementsByTagName("a")[0]
.removeAttribute("href");
or
document.querySelector(".one a").removeAttribute("href");
Any method of the above will solve your problem
I hope it helps

I think you need to disable the Href functionalities here.
Please use Jquery :
$('.one > a').on('click',function(e){
e.preventDefault();
}
Hope this will work for you

Select a div insinde another div with jQuery

So I try to select a div within another div. My html goes like this:
<div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div>
I want to select my #cube0 within my Stage_game_page specifically, with jQuery or JS.
The goal of the selection is to use it in an loop.
I tried :
var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#Stage_game_page")$("#cube"+i)[...]
}
I don't understand what I'm doing wrong.

var count =$("#Stage_game_page").children().length;
for(i=0; i<count;i++){
$("#cube"+i);
}
This is sufficient to select the "#cube0"/"#cube1"/"#cube2" etc. especially since ids are always unique. To answer the question $("#cube0", "#Stage_game_page")... that is how you select a div in another div

The id attribute should only be used once! I see above that you're using id="cube0" twice. If you want your divs to be recognized in multiple instances, use a class instead (the . instead of the #). Using the same id twice will probably break your script.
I believe for your html, you could use id "cube0", "cube1", etc., as long as you're ok with entering them manually. That should work for the loop you'd like to use.

Loops through each div that starts with the id cube inside Stage_game_page1
$("#Stage_game_page1 > div[id^='cube']").each(function () {
alert($(this).html());
});
JSFiddle
Child Selctor
Starts with Selector

use each() for loop.
$('#Stage_game_page1').children().each(function(index) {
// your code here with index starts from 0
});
or this using jquery attribute starts with selector
$('#Stage_game_page1').find('[id^="cube"]').each(function(index) {
// your code here
});

You need to use .find() or .children() or the like.

The correct jQuery usage would be
$("#Stage_game_page").find('#cube'+i)
to find a div with that id inside the container #stage_game_page

You have duplicate cube0 in your html code..
and i think the look should contain something like that:
$("#cube"+i)[...]

One another solution is:
$("#Stage_game_page1 div[id='cube0']")

Find the first parent of a selector

Consider this sample html
<div class="A">
<div class="B">
<span class="C">Sample text</span>
<div class="D">
<div class="E">Clickable Text</div>
</div>
</div>
</div>
And some jQuery
$(".E").click(function(){
//body
});
What is the easiest way to get a parent of $(this) that matches a selector? For example, say in the example I need to get the div where class="A". At the moment because I know the structure of the html I could do
$(this).parent().parent();
But I'm looking for a way that would work regardless of the structure. Something along the lines of
$(this).findFirstParent(".A");
I hope I've been understandable.

$(".E").click(function(){
console.log($(this).closest('.A'));
/* console.log($(this).parents('.A')); works fine too */
});
See
http://api.jquery.com/closest/
http://api.jquery.com/parents/
Note that parent() is different than parents() method (the first one look for one ancestor only)

First Solution:
$(this).closest('.A')
Source: http://api.jquery.com/closest/
This will return the first parent when traversing that matchs the selector.
Second solution:
$(this).parents('.A:first')
Source: http://api.jquery.com/parents/
This will return all the parents that matches the selectors

What about
$(this).closest(".A");

This is the way i would do it
$(this).parents("div.A")

The jQuery parent selector might help you there. You can combine it with the class you are looking for. See the docs #
http://api.jquery.com/parent-selector/

Is it possible to get a selector using indexOf

Like
<div id="box_1">
<div id="box_2">
<div id="box_3">
If i want to get all id's starting with 'box_' how can i do it something like this..
$("#box_" + anything )
Unfortunately wrapping the div's won't work because it will get all the other divs in side and between the box divs.
I guess i can give them all another class and reference it like that, but just wondering if there's something like this out there.. thanks.

You can use an Attribute Starts With selector:
$("div[id^=box_]");

It is possible with the attribute starts with selector as others have mentioned, but it might be better to give each element a class:
<div id="box_1" class="box"></div>
<div id="box_2" class="box"></div>
<div id="box_3" class="box"></div>
Select with:
$(".box")

Yep:
$('div[id^="box_"]');
In this case, because you are trying to use the ID selector, its better to switch to an element selector, combined with an attribute selector.

You can use an attribute selector:
$('[id^="box_"')
That will give you all elements whose id starts with "box_". If you need to, qualify it with an element:
$('div[id^="box_"')

If you dont know whether it starts or endswith any string then you can try *= selector which will look within the attribute value.
$("div[id*='box_']");

Jquery find all except

I have following HTML:
<div id="123" class="test">
<div class="testMessage">Foo</div>
<div><div class="testDate">2010</div></div>
<div id="127" class="test">
<div class="testMessage">Bar</div>
<div><div class="testDate">2011</div></div>
</div>
</div>
And I have following JS/jQuery code:
$(".test").find(".testDate").val("cool 2010");
How to change JS/jQuery to find "testDate" class element except in children "test" class block without using children?
P.S. I know only about class name and I don't know how many divs can be nested.

Update
Its probably the weirdest selector I've ever written:
$("div.test").not(':has(> .test)').siblings().find('.testDate').text('cool 2010');
Demo: http://jsfiddle.net/mrchief/6cbdu/3/
Explanation:
$("div.test") // finds both the test divs
.not(':has(> .test)') // finds the inner test div
.siblings() // get all other divs except the inner test div

Try this and also div elements do not have a value property, use html() method to set the inner html or text()
$("div.test :not(.test)").find(".testDate").html("cool 2010");
If you can modify your main div id to "_123", you can straight away use the id selector like this
$("#_123 > div.testDate").html("cool 2010");

I think the not() selector might help. You can learn more about it here: http://jsperf.com/jquery-css3-not-vs-not

Anytime you try to select $('.test'), it will grab all elements with a class='test'. You need to start at the outermost body tag:
$('body').children('.test').children(':not(.test)').find('.testDate').text('cool 2010');