-1

Trying to add the class 'checkmark' to an i that has the id 'partnered'

$(document).ready(function () {
  jQuery('span:contains("true")').addClass('checkmark');
});

This code works fine, but appends the class directly to where it checks. How can I append this class to a completely different i element?

Jan Henning
  • 82
  • 7
  • 1
    Well you can, but we have no clue since you did not provide the html. – epascarello May 18 '18 at 14:21
  • 2
    Possible duplicate of [Jquery: Checking to see if div contains text, then action](https://stackoverflow.com/questions/902597/jquery-checking-to-see-if-div-contains-text-then-action) – roomcayz May 18 '18 at 14:25
  • @Roomy Thanks for the reference. Solved it using some code from there. – Jan Henning May 18 '18 at 15:03

4 Answers4

1

Use the jQuery parent selector:

$(document).ready(function () {
  jQuery('span:contains("true")').parent().addClass('checkmark');
});

Or even safer you could use .closest:

$(document).ready(function () {
  jQuery('span:contains("true")').closest('i.someClass').addClass('checkmark');
});
Danmoreng
  • 2,367
  • 1
  • 19
  • 32
  • I have multiple `i` elements, will this restrict me to the closest one? The `i` I would like it appended to is past several other `i`'s. Any way to append it to an i that already has a specific class/id? – Jan Henning May 18 '18 at 14:47
  • .closest takes an selector and then traverses the DOM tree upwards until it finds a matching element: https://api.jquery.com/closest/ So yea, you can add a specific class or id to it. I edited it in so you can see where you would add a class. – Danmoreng May 18 '18 at 15:19
1

It's a bit difficult to understand your question, but if i understand it correctly

"add class checkmark to i that has id partnered. How can I append this class to a completely different i element?"

then it's fairly simple

$(document).ready(function () {
  $('i[id^="<desired id name>"]').addClass('checkmark');
});

Note: It seems fairly inpractical to have this as an id instead of class from html/css point of view

Samuel Hulla
  • 6,617
  • 7
  • 36
  • 70
  • Apologies, English isn't my mother tongue. I'm receieving either a true/false into a `span`. I'd like to check if this `span` includes the text "true" and if it does, add a class to a different `i` element. Hope this makes sense. – Jan Henning May 18 '18 at 14:40
0

Here's your answer in plain JavaScript:

// Get the element with ID 'partnered'
// Get a <span> element (create one if there's none)
var partnered = Document.prototype.getElementById.call(document, 'partnered'),
    span = (
        Document.prototype.querySelector.call(document, 'span') ||
        Document.prototype.createElement.call(document, 'span')
    );

// Custom function
function addClass() {
    var args = [... arguments].slice(1),
        $args = args.length,
        element = arguments[0];

    // Loop through arguments to update them
    for (var i = 0; i < $args; i += 1)
        args[i] = String(args[i]);

    // Loop through arguments after updating all of them
    for (var i = 0; i < $args; i += 1) {
        // Cache the index
        var className = args[i];

        // Append new class name
        element.setAttribute(
            'class',

            // Get the current class
            ((element.getAttribute('class') || '')

            // Remove existing duplicates of the class to add
            .replace(RegExp('\\b' + className + '\\b', '')

            // Keep the class attribute tidy
            // and add the class
            .trim() + ' ' + className).trim()
        )
    }
}

/* Synchronously
        A while loop could work too if you're certain enough.
*/
if (span.textContent || span.innerText)
    addClass(partnered, 'checkmarked');

/* Asynchronously */
(function check() {
    if (span.textContent || span.innerText)
        addClass(partnered, 'checkmarked');

    else
        typeof requestAnimationFrame == 'function' ?
            requestAnimationFrame(check) :
            setTimeout(check)
})
Lapys
  • 936
  • 2
  • 11
  • 27
0

Solved using

if ($('span#ispartner:contains("true")').length > 0) {
  $("#partnered").addClass("checkmark");
}

Thanks for the help!

Jan Henning
  • 82
  • 7