How to find the last actual element in jQuery object selector chain?

Question

Here are some example variables:

var source = $('.container').find('img').attr('src');
var source = $('.container').find('img').attr('href');
var source = $('.container').find('img').html();

for each of those examples, I need to get the actual element from the selector.

the following fails: source.hide();

end is similar to the functionality I'm looking for, but it doesn't work if the variable returns a string.

end works like this:

$('.container').find('img').css('background', 'red').end().find('.something-else').css('background', 'green');

this works because the css method is applying styles, not returning information

the following example will fail because the css is returning the background css:

$('.container').find('img').css('background').end().find('.something-else');

Do you want to hide the last element in the selection? Please add your HTML structure — Rino Raj, Aug 01 '18 at 19:40
If you are putting the HTML it will be helpful to check if your jQuery section is correct or not and we will get a better picture of the problem you are facing — Rino Raj, Aug 01 '18 at 19:44
it doesnt matter what the selector is `$('.anything').find('.something').first().attr('src');` => i want everything before the `.attr` or another example: `$('.whatever').eq(4).find('.whenever').attr('src');` => i want everything before the `.attr` — Tyler Fowle, Aug 01 '18 at 19:49
What if you just stored the element(s) as a variable first? `var $elements = $('.container').find('img'); var src = $elements.attr('src'); $elements.hide();` — Tyler Roper, Aug 01 '18 at 19:56
@TylerRoper unfortunately this isnt going to work. this assumes that you are always referencing the src attribute. it needs to be able to work with any selector. `$('.anything').find('.something').first().attr('href');` or `$('.anything').find('.something').first().html()` — Tyler Fowle, Aug 01 '18 at 19:58
This question is not clear at all - it sounds like an XY problem. Can you explain to us *the actual problem you're trying to solve* instead of asking about this one incredibly specific and unclear attempted solution? — Tyler Roper, Aug 01 '18 at 20:00
@TylerFowle I don't get your point in relation to what TylerRoper said. Per your example, if you wrote `var firstElement = $('.anything').find('.something').first()` then after that you can get any attributes of that element by referencing the variable `firstElement`, because that variable is now a jQuery object containing your element. Tyler's example makes perfect sense. After that you can write `var src = firstElement.attr("src")` or `var text = firstElement.text()` or anything else you want to do to get info from the element. — ADyson, Aug 01 '18 at 20:01
Why is .attr('src') in the chain? That is always going to return a string or undefined if the matched element set is empty. — RamblinRose, Aug 01 '18 at 20:01
its for a plugin, the variable is set by whoever is calling the plugin, and it can be any selector — Tyler Fowle, Aug 01 '18 at 20:03
"the variable"...which variable exactly? In your examples the selectors are hard-coded, e.g. `.container`, `img` etc. Please give a clear example of what you actually mean. — ADyson, Aug 01 '18 at 20:04
Not following your question either. What exactly are you trying to hide with the `source.hide()` example and how is `.end()` referenced in your question related to what you are trying to do? — benvc, Aug 01 '18 at 20:04
Your updated question still does not explain at all why this has to be done in one line. Why can't you just do it in two separate lines? If you have the ability to edit the line to add `.end()`, why can't you simply *not* add the `.attr` to the end? — Tyler Roper, Aug 01 '18 at 20:23
so someone is passing `source` into your plugin, and it could be any type of object? A string, or a set of elements, or anything else? Is that the scenario? You still aren't really making clear what the logistical constraints are here. And you want, if `source` is a string, to find out what element it came from? That's impossible, it's just a string, it no longer has any relationship to where it was pulled from previously. Maybe your plugin should require that callers submit a jQuery object, but since we don't know the purpose of the plugin or this variable it's hard to know if that's sensible — ADyson, Aug 01 '18 at 20:23
@ADyson i think you have answered my question with "And you want, if source is a string, to find out what element it came from? That's impossible, it's just a string, it no longer has any relationship to where it was pulled from previously." — Tyler Fowle, Aug 01 '18 at 20:26
Sounds like you may have gotten what you need from @TylerRoper (which is great cause I am still not completely following what you are trying to do). As an aside, it sounds like it might help you to read up on jquery chaining to avoid some of the road blocks you are encountering. This [SO question](https://stackoverflow.com/questions/5505648/jquery-chaining-can-everything-be-chained-when-can-we-not-chain) may be helpful. — benvc, Aug 01 '18 at 20:47
This is definitely possible if you replace all of the jquery methods with methods that return an object that has the interface you want. — Kevin B, Aug 01 '18 at 20:47

Tyler Roper · Accepted Answer · 2018-08-01T20:41:39.403

0

As unfortunate as it may sound, you cannot achieve what you're after. The variable is only a string - you cannot find out the manner in which it was set, how it was retrieved, etc.

The closest workaround that you could use is an attribute selector. If you have a string pertaining to an image's src attribute, you can take that string, and select all elements where the src attribute matches.

However, this doesn't ensure that you'll get the same selector. If I got the src attribute from ONE image, and there were TEN other images on the page with the same src, the reverse-lookup would return all 10 elements instead of just the 1 that the original variable came from.

var source = $('.container').find('img').attr('src');

var $element = $('[src=' + source + ']');
$element.hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img id="myImage" src="SOURCE" />
</div>

is it possible to setup two variables, one for the element, and one for the extension that would return the string? and then concat them somehow? var sourceElement = $('.container').find('img'); var sourceExtension = "attr('src')"; var sourceSrc = sourceElement.sourceExtension

You could hypothetically use eval() but I personally avoid that like the plague. Perhaps a better solution would be something like:

var sourceElement = $('.container').find('img');
var getSrc = (elem) => $(elem).attr("src");
var sourceSrc = getSrc(sourceElement);

console.log(sourceSrc);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <img src="SOURCE" />
</div>

edited Aug 01 '18 at 20:41

answered Aug 01 '18 at 19:59

Tyler Roper

21,445
6
33
56

i don't think this is an acceptable solution. like you said, since you are doing a reverse-lookup you cannot guarantee that its the correct element – Tyler Fowle Aug 01 '18 at 20:19
2

Then the answer to your question is simply "You can't". Once you set the variable to the `src` string, that's it. That variable is now just a `string`. You cannot get any information about how it was set, or where that string came from. The variable isn't referential - that is, it isn't storing `$('.container').find('img').attr('src');` - it's storing the *result* of that. – Tyler Roper Aug 01 '18 at 20:21
@TylerFowle Not a problem. I've updated my answer to reflect that additional information while still maintaining the closest "work around". – Tyler Roper Aug 01 '18 at 20:32
is it possible to setup two variables, one for the element, and one for the extension that would return the string? and then concat them somehow? `var sourceElement = $('.container').find('img'); var sourceExtension = "attr('src')"; var sourceSrc = sourceElement.sourceExtension` – Tyler Fowle Aug 01 '18 at 20:37
@TylerFowle I'm not entirely clear on what the restrictions are to which you're bound, but I've edited my answer with some more information. – Tyler Roper Aug 01 '18 at 20:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/177229/discussion-between-tyler-fowle-and-tyler-roper). – Tyler Fowle Aug 01 '18 at 20:44
^ Not available for chat at the moment but if you have additional questions I can potentially address them later. – Tyler Roper Aug 01 '18 at 20:44
the problem with that is then the attr('src') is hardcoded, which it may not always be src, it might be href, or html() – Tyler Fowle Aug 01 '18 at 20:47

How to find the last actual element in jQuery object selector chain?

1 Answers1