We Keep Coding

How to target a specific element without knowing it's class or id, but do have all DOM details of the element

To place an external widget without having to let non-technical people paste embed code on every desired spot on a webpage, I'm working on a visual div and p tag selector where people can just pinpoint the desired element(s).
When people hover over an element, it will show a red border to show them what's selected.
For us to place the widget, normally we would target by class or id. However, the class / id should be unique for it to work and unique classes for a random div / p tag is pretty rare.
Via a piece of jquery code:
$(document).on('mouseenter mouseleave', '.sj-highlight',
function (e) {
}
I can get the DOM details about the selected element.
Is there a way I can target the highlighted element by using some data from the DOM details and if yes how?
Tried the code above but just don't know much about DOM selecting possibilities.
To make the whole highlight per element possible, I wrote this:
$( document ).ready(function() {
$('div, p').each(function(i){
$(this).addClass('sj-highlight sjhighlight'+i+'');
$(this).attr('data-sj', 'sjhighlight'+i+'');
});
$(document).on('mouseenter mouseleave', '.sj-highlight', function (e) {
var sjhighlighter = $(this).attr("data-sj");
// hide other highlights
$('.sj-highlight').css("border","2px solid transparent");
if(e.type == 'mouseenter')
{
$('.'+sjhighlighter+'').css("border","2px solid #ff0000");
}
});
The end result would be to somehow target the selected elements with the DOM instead of a class or id.

From the pieces that i put together i think if you can get to the element using
$(document).on('mouseenter mouseleave', '.sj-highlight',
function (e) {});
that means you already have it, because $(document).on() form works for dynamically added elements (that means even if you add element dynamically it still works properly), you can use :
var elementClass = $(this).attr('class');
and you have complete control over the element from there.
And you have also all possibility over its children or it parent which returned as dom elements objects.
I think that your question need a little bit of clarification too.

Here is an option that I used when trying to target elements without the ID or Class. You first need to figure out what each of these highlighted elements have in common. Either it be a specific color, element hierarchy, etc. Then you could use the filter() jquery to find all elements with that spec. This is what I used.
/*select an element that contains this piece of code your trying to target*/
$('#Parent_container').filter(function() {
/*here you will specify what you're trying to identify or target*/
return $(this).find('div[class="sj-highlight"]').length >0;
/*optional but you can create a condition to add code or do whatever you want*/
}).find('div[class="sj-highlight"]').after('<p>some stuff</p>');
Hope that helps. It might give you some idea of what options you have.

Hide the element within the div

I'm duplicating the div #Play_Start. I have a event within div On select of Play from Dropdown it hides the Green div with Play text.
It works fine on first div. But doesn't work on duplicated div.
I want to hide the green div on selection of dropdown Play option from particular div.
E.g : from div one dropdown selected play option it should hide the green div of only that div not other.
and same with other divs. It should hide the green div on selection of dropdown option from same div.
My fiddle here : http://jsfiddle.net/kgm50e43/2/
at the moment it only works for first div and not for other duplicated divs.

There are multiple problems on your code,
You are duplicating the id's. Id should be unique. You need to replace it with class names.
You don't need to write inline function calls from elements. you can use jQuery to bind events to the elements.
Since you are creating the elements dynamically, you need to use delegates for binding the elements.
Then you can use like this,
$(document).on("change", ".Inputs-Control", function () {
$(this).closest(".Play_Start").find('.IconTest').hide();
});
Fiddle

Don't use IDs when duplicating elements. You should only have 1 ID (unique). You should use classes.
I think this is what you are looking for. I'm not going to be writing your code for you - but you should be able to figure it out using this.
$('.input-control').on('change', function(){
var val = $(this).val();
if(val === "0"){
$(this).parent().find('.hide-me').hide();
}
});

Using each in jquery with a click event for a button that corresponds to a paragraph

Currently I have three buttons, each with an ID that corresponds to their order. When a button is clicked a paragraph that corresponds to that order should hide itself with .hide().
My problem is how do you use .each() to loop though the buttons by finding which has been clicked using a click() event to hide the corresponding paragraphs?

Bind a click event to all of your id's that start with something, let's assume "order-#", then traverse to the closest <p> element and hide it.
$('[id^=order-]').click(function(){ $(this).closest('p').hide() });

You can use each to traverse all the buttons (identified by a common class) adding a click-handler which will make use of the button's id to select and hide the appropriate paragraph. Something like
$('.button').each(function (buttonIndex, buttonEl) {
$(buttonEl).click(function () {
$('.par' + $(this).attr('id')).hide();
});
});
Here's the relevant fiddle.
Note that there's many ways to avoid using the button's id to target the appropriate paragraph, for example by using the buttonIndex param above.
And generally speaking - as ohgodwhy's answer indicates - there's ways of doing this in an altogether more concise manner.

How can I use adjacent sibling selectors with "this" in JQuery?

I have a list of various divs all with the same class. I am using the .each function to select individual ones on the user click (just as an example), and any actions after that naturally require this, so that it only selects the div in question. For example:
$(".div").each(function(){
$(this).click(function(){
$(this).css("background","green");
});
});
But what if I wanted to make the next element in line turn green as well on the click? My first instinct would be to use adjacent sibling selectors but it appears that only works when using two absolute elements, i.e. $(".element1 + .element2"). I can't seem to get it to work with this.
Here is a JSfiddle with a full example to play around with.
How can I do this?

You are looking for $(this).next()
http://api.jquery.com/next/
http://jsfiddle.net/naad8wbr/3/
$(".div").click(function () {
$(this).next().css("background", "green");
});
If you want both the next and this, then you could use:
$(".div").click(function () {
$(this).next().andSelf().css("background", "green");
});
http://api.jquery.com/andSelf/
http://jsfiddle.net/naad8wbr/4/

jsFiddle Demo
In order to "make the next element in line turn green as well on the click" you will have to add to the set of elements in the jQuery object.
You can use nextElementSibling MDN in correlation with jQuery's add
$(this).add(this.nextElementSibling).css("background", "green");

jquery: dynamically appending li items to ul then adding click, but click runs through each li

So I may be approaching this wrong as I am learning but I can't seem to figure out what I am doing wrong here (probably simple mistake but I am having trouble). So I am trying to have a within the markup, a button click that allows selection from dialog and the submit button on the dialog includes call to custom function that does some logic then appends string to the like:
buildListElementItem += "<li>something</li>";
$("#my-list").append(buildListElementItem);
then bind click because i need each of these list items to be representative of a selection panel type thing
$("#my-list li").bind('click', function () {
//processing stuff
});
everything works fine but if I add more than one item to this list (one after another) and you click a single item, it rolls through each one, which confused me because there is no each and I think this should only add it to a single item....
so there is a bunch more to this function/etc but I think my approach right here is wrong??
I have tried modifying the selector to like a class that I add in the string for the li, I have tried using .on, .live, .delegate or anything I could find instead of bind click.
Perhaps this is simple approach type error to trying to perform this but I would great appreciate any help, advice, etc on this.
EDIT: just adding more for clarification
Dialog allows users to select item from select/drop down, and button click (jquery ui) has function that calls below idea to add the item to a list element, which serves as selection panel. So they can populate items needed on panel, then click each item to populate and associate data with that item.
function addNewListItem(passedType)
{
var buildListElementItem = "<li>" + passedType + "</li>";
$("#my-list").append(buildListElementItem);
$("#my-list li").bind('click', function () {
otherStuff();
});
if I do the above I am guessing that this cause every element to get binded over and over again? not sure, but this works with the exception that when I click a single li item on that panel, it processes for all li items on the panel (otherStuff function). So I think from the examples I am starting to understand the issue or why this won't work, but how would I approach what I am trying to do then? always appreciated guys!
}

When you say "there is no each", you omit that $("#my-list li") is a jQuery selector, i.e. it returns all the elements that match the expression: in this case, all the li items within the child tree of #my-list.
Thus, when you call bind, it is going to bind to each li item that has already been added to the element.
What you are looking for is something along this:
buildListElementItem = $("<li>something</li>"); //constructs a jquery object you can bind to
buildListElementItem.bind('click', function () {
//processing stuff
});
$("my-list").append(buildListElementItem);
This way, you bind before the element has been added.