How do I get a class as a string and also the innerHTML from an element within S.fn.init?

Question

S.fn.init [div.definitionAgelenidae, prevObject: S.fn.init(558)]

I have tried:

var Test02 = $(".definition").children().filter(function () {
    return $(this).css("visibility") == "visible";
};

console.log(Test02[0]);

I would like to get the string definitionAgelenidae

`S.fn.init` is a jQuery object. It's not clear where you are getting it from. — Heretic Monkey, Jan 06 '21 at 15:29
[`Test02.prop("className")`](https://api.jquery.com/prop/) or [`Test02.attr("class")`](https://api.jquery.com/attr/) should do — Bergi, Jan 06 '21 at 15:36
For what reason would you ever need to? It's a bit of a code smell to try, and indicative of an X/Y question. What is your intended goal? — Rory McCrossan, Jan 06 '21 at 15:55
I would like to get the innerhtml of the visible element so I can have a more specific search result, right now it is just searching for the class I think, but the full innerhtml will give me who found the species @Bergi — Mathew Stratton, Jan 06 '21 at 16:03
Please [edit] your question with the further clarification so that everyone can benefit. — Heretic Monkey, Jan 06 '21 at 16:12
@MathewStratton "*I would like to get the innerhtml*" - that's what https://api.jquery.com/html/ does — Bergi, Jan 06 '21 at 16:40

score 0 · Answer 1 · answered Jan 06 '21 at 16:09

Directly accessing $.fn.init is not a good idea, and should be avoided. Given the goal you describe in the comments (copied below) there is an alternative.

I would like to get the innerhtml of the visible element so I can have a more specific search result

In this case you can supply another condition in the function you provide to filter() which checks for the presence of a specific word. Something like this:

let term = 'dolor';

let $matches = $(".definition").children().filter(function() {
    return $(this).is(":visible") && $(this).text().toLowerCase().includes(term.toLowerCase());
}).addClass('match');

.match { color: #C00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="definition">
  <p>Lorem ipsum dolor sit</p>  
</div>
<div class="definition">
  <p>Ipsum dolor sit amet</p>  
</div>
<div class="definition">
  <p>Foo bar fizz buzz</p>  
</div>
<div class="definition">
  <p>Dolor sit amet consectetur</p>  
</div>

Note that .toLowerCase() is used here to make the search case-insensitive. This can be removed if it's not required.

can I set var term to multiple different words? Seeing there is more than one scenario at the end of the innerHTML of each of these elements. I feel like that may be my only option unless there was a way to filter S.fn.init again, but you saying it's a bad or dangerous thing to do. — Mathew Stratton, Jan 06 '21 at 16:30
Sure, there's ways to search for multiple words within a string, [this](https://stackoverflow.com/a/44605049/519413) for example. I'd suggesting removing all thoughts about $.fn.init - it's not a solution to any issue :) — Rory McCrossan, Jan 06 '21 at 16:36

How do I get a class as a string and also the innerHTML from an element within S.fn.init?

1 Answers1