We Keep Coding

How to select descendants of this in jQuery?

CODE:
$(this).html("<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>");
$(this "td").each(function(index){ //i want a selector somewhat like this (to select td descendants if this)
//mycode
});
Please suggest a syntactically correct selector

Pass this as second parameter to set the context
$("td",this).each(function(index){ //i want a selector somewhat like this (to select td descendants if this)
//mycode
});
Or use $(this).find('td') method, this case yo can get reference back to $(this) using end() method.
$(this).find("td").each(function(index){ //i want a selector somewhat like this (to select td descendants if this)
//mycode
});

jQuery has quite a few ways to target all of the child elements that appear beneath beneath a specific element via the find() function or by simply using the context parameter of a normal selector :
// This will use the find() function to find all <td> elements under this element
$(this).find('td').each(function(index){ ... });
// This will do the same thing (selecting all <td> elements with this as the context)
$('td',this).each(function(index){ ... });

Get child-element from nested div

I have a div-structure like this:
<div id="company1">
<div class="space m-d p-r s-t">
<div class="zzr">
<div class="myTemplate">abc123</div>
</div>
</div>
</div>
I want to get the content form the class "myTemplate" over my "id"-div "company1"
Is it necessary to call all classes in my selector? Would be not good becaus of responsive design, the classes will change. So I woul prefer to call the "#company1" and then directly the "myTemplate". Tried this, but the content is empty and also the selector.
$('#company-'+currentTabIndex).children('.myTemplate').html()
//currentTabIndex has the current Tab-Index, in this case: 1

Firstly, the id property in your HTML has no - in it. Secondly, children looks at direct descendants, whereas you need to use find():
$('#company' + currentTabIndex).find('.myTemplate').html()
That said, you can use a single selector and remove the find() completely:
$('#company' + currentTabIndex + ' .myTemplate').html()

You want .find, not .children:
$('#company-'+currentTabIndex).find('.myTemplate').html()
.find looks for descendant elements. .children just looks for immediate children.
Or a single selector using the descendant combinator (the space before .myTemplate below — gotta love that name):
$('#company-' + currentTabIndex + ' .myTemplate').html()
See also Rory's note about the - in your selector, which isn't in your id. Either remove it from the selector, or add it to the id.

Children searches only for single level child elements, you have to use find().
$('#company-'+currentTabIndex).find('.myTemplate').html()
Given a jQuery object that represents a set of DOM elements, the
.children() method allows us to search through the children of these
elements in the DOM tree and construct a new jQuery object from the
matching elements. The .children() method differs from .find() in that
.children() only travels a single level down the DOM tree while
.find() can traverse down multiple levels to select descendant
elements (grandchildren, etc.) as well.
Reference: .find() - .children().

Instead of
$('#company-'+currentTabIndex).children('.myTemplate').html();
Try
$('#company'+currentTabIndex).find('.myTemplate').html(); //remove '-' from the selector
Use .find() instead of .children() as shown above.

How do I use the child element of 'this' as a selector in jQuery?

I have a function that calls when the user mouseover a certain div. The function shows a different div, but the issue is that it shows all of the divs with that class.
Here's the JS:
$('.edit-image').mouseover(
function(e){
$('.edit-image-link').show();
});
What I want it to do is only show the .edit-image-link div if it's a child of the element that the user has their mouse over.

You can use .find() to fetch only the descendant elements of an element based on a selector.
$('.edit-image').mouseover(function (e) {
$(this).find('.edit-image-link').show();
});
or you can pass a context to jQuery for searching a selector
$('.edit-image').mouseover(function (e) {
$('.edit-image-link', this).show();
});
Note: Inside a jQuery callback method like event handlers, this will refer the to current dom element
I personally prefer the first method

Use
$('.edit-image').mouseover(function () {
$(this).find('.edit-image-link').show();
});
References
this keyword
.find()
Get the descendants of each element in the current set of matched
elements, filtered by a selector, jQuery object, or element.

Jquery toggle just the p tags under the div clicked

Quick, simple question.
I have this function working at the moment ;
$("#menuopties").click(function(){
$("p").toggle();
});
However this toggles every p tag.
I just want to toggle the p tags which are under the div #menuopties (which has been clicked)
Thanks.

Your current selector "p" will get all the elements of type p instead of getting the p within the current object. Use find() to get the descendant of current element. you will get the source of event object using $(this)
$("#menuopties").click(function(){
$(this).find("p").toggle();
});
You can use pass current object in context of the selector using jQuery( selector [, context ] )
$("#menuopties").click(function(){
$("p", this).toggle();
});

Try like this
$("#menuopties").click(function(){
$(this).find("p").toggle();
});

How about:
$("p", this).toggle();

try:
$("#menuopties").click(function(){
$(this).find("p").toggle();
});
hope that helped.

Change $('p').toggle(); to $(this).children('p').toggle();
$(this) refers to the current jQuery object (in this case wrapping the #menuopties DOM element), so running .children() allows you to filter its descendant elements by whatever selector you want (in this case p).
edit: as buzzsawddog pointed out, it's important to note .children() only returns the child elements a single level below in the DOM, so if your p tags are not immediate children of #menuopties you should use .find() instead.

How to search all <input> descendants of a DOM element and disable them

Let's say that I have a DOM object:
var a = document.getElementById('parent')
I want to search all input inside element a.
What should I do in jQuery?
I want to disable all input inside a, like syntax below:
$('#parent input').attr('disabled',true);
I tried
$(a).children('input').attr('disabled',true);
but gave no results.
Note: var a is an element I got from another function.

$(a).find('input').prop('disabled', true);
children() just searches immediate children of the element while find() searches all descendants.
Update: Also consider sinsedrix's remark on the difference between attr() and prop().

Don't forget attr is for HTML attributes and prop for DOM properties, try this:
$(a).find('input').attr('disabled','disabled');
or
$(a).find('input').prop('disabled',true);

$(a).find('input').attr('disabled',true)

$(a).find('input').attr('disabled',true);