Calling user defined javascript function on jQuery element

Question

I've been trying to call a user defined JavaScript function on a jQuery element, and though I've seen several topics on here about it, I'm still having a bit of trouble applying their logics to my situation. Here's what i've tried so far:

Javscript & jQuery:

    $(document).ready(function() {

// JavaScript function     
     nl2br = function (str, is_xhtml) {
            var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br ' + '/>' : '<br>';
            return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
        }



    // jQuery Call
        if ( ! $('.mediaDesc:contains("p")').length || ! $('.mediaDesc:contains("div")').length || ! $('.mediaDesc:contains("span")').length ) {
                nl2br(this);
            }

    }); //end document ready

HTML:

<div class="mediaDesc">
Hello World!
I am text on a new line soon to have a br tag before me!    
</div>

My goal is to dynamically find div's with a class of mediaDesc to see if their inner content contains html tags such as p,span, or div. If not, then apply the nl2br JavaScript function to it. Any help would be appreciated. Thanks in advance.

What happens when you debug this? Are there any errors on the console? Does the jQuery code run at all? Is the if condition satisfied? Do the selectors find the elements you expect them to find? Does your function get called? Step through this in a debugger, you'll be able to find useful information to help us assist you. — David
– David, Commented Feb 22, 2014 at 21:26
you're passing an object reference this to nl2br but the argument looks like it requires a string (the content you are trying to affect). IOW it seems perhaps you want something more like this nl2br($(this).html()); — CrayonViolent
– CrayonViolent, Commented Feb 22, 2014 at 21:26
Is that the full extend of your javascript? There's several things that are probably causing the issue: 1) Needs to be in a document ready function, so it runs after all the html is rendered: jQuery(function($) { ... put your script in here ... }); - also, I'm not sure, but I believe you'll need to change from nl2br(this) to nl2br($(this)) - there is a difference... - plus, as @CrayonViolent points out, the nlbr() function is set up to parse a string, but you're passing it the element object... — random_user_name
– random_user_name, Commented Feb 22, 2014 at 21:26
@cale_b It is indeed in a document ready function, and I've used the $(this) selector in nl2br as well and the code still does not execute as desired. — Tower
– Tower, Commented Feb 22, 2014 at 21:28
Then it's likely the object-being-passed issue, where the function expects a string. The thing is, you have to change the function to accept the object, or else change how it is called: $(this).val(nlbr($(this).val())); — random_user_name
– random_user_name, Commented Feb 22, 2014 at 21:32

Collin Grady · Accepted Answer · 2014-02-22 21:55:43Z

1

Based on the current available info, I believe you want something like this:

$(".mediaDesc").each(function () {
    if ($(this).find("p").length == 0 || $(this).find("div").length == 0 || $(this).find("span").length == 0)
    {
        $(this).html(nl2br($(this).html()));
    }
});

edit: fixed mis-use of .contains

http://jsfiddle.net/s8eNh/

edited Feb 22, 2014 at 21:55

answered Feb 22, 2014 at 21:37

Collin Grady

2,2421 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tower Over a year ago

I tried your suggestion as typed but it did not work. I updated my code to reflect the full layout of it's usage to provide better clarification.

Collin Grady Over a year ago

You could throw in some console.log lines to see where it's going wrong; console.log($(this)); as a start, for instance, to see if it's hitting all the .mediaDesc divs properly. I'd probably log the output of the .contains() calls too and see if they're returning expected values.

Collin Grady Over a year ago

Ack, I'm misusing contains; hang on, I'll fix my example

Tower Over a year ago

It worked! Thank you! Though looking at it, how was your code different from mine, not in terms of calling $(this) but as far as the if statement goes? It' essentially the same equivalent to $("element:contains('p')");

Collin Grady Over a year ago

It's not the same at all - $(".mediaDesc") grabs all elements of that type, not just one. You're then not doing anything with them. You check it, but then call nl2br() on document (which is what this refers to in your code), which has nothing to convert.

|

martypdx · Accepted Answer · 2014-02-22 22:09:28Z

0

.contains is for searching text within the node. What you want is:

$('.mediaDesc').not(':has(p, div, span)').each(nl2br)

if you need to process the node and only call nl2br with text or html then do:

$('.mediaDesc').not(':has(p, div, span)').each(function(){
    nl2br( $(this).html() )
})

answered Feb 22, 2014 at 22:09

martypdx

3,71216 silver badges23 bronze badges

Collectives™ on Stack Overflow

Calling user defined javascript function on jQuery element

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related