Alternative to "this" variable.

Question

I am trying to write a simple script in JavaScript, just for testing purposes. I am defining 2 variables, sort of unnecessary, but nice anyway which hold string values for two different scenarios, if the element before the button contains bold text when the button is clicked, the respective variable will be displayed in an alert dialog box.

So, here is my code:

$(document).ready(function(){

  var Bold="Yes, some of this text is bold!";
  var NoBold="No, none of this text is bold.";

  $("<input class="BoldButton" type="button" value="Bold?" id="IntroButton"></input>")
  .insertAfter("#intro");

  $("<input class="BoldButton" type="button" value="Bold?" id="LatestNewsButton"></input>")
  .insertAfter("#news h2");

  $("input.BoldButton").click(function(){
    if () {
      $('').();
    } else {
        $('').();
      {
});

});

I was in the middle of writing my if else statement when I realized I do not know how to check if bold is in the element above the button. I was thinking of using the pseudo-variable this, but I'm pretty sure that's wrong, because wouldn't it be the element before the "this" pseudo-variable? I think I may be confusing the purpose of this, sorry about that.

Anyway, I really just need a method of checking to see if the element before the button contains bold text, and then I can do the rest. :)

Thanks!

FINAL CODE:

$(document).ready(function(){

  var Bold="Yes, some of this text is bold!";
  var NoBold="No, none of this text is bold.";

  $('<input class="BoldButton" type="button" value="Bold?" id="IntroButton">')
  .insertAfter("#intro");

  $('<input class="BoldButton" type="button" value="Bold?" id="LatestNewsButton">')
  .insertAfter("#news p");

 $("input.BoldButton").click(function(){
    if ($(this).prev().is(':has(b, strong)')) {
      alert(Bold);
    } else {
      alert(NoBold);
    }
});

});

Answer 1

"The element before" can be selected using .prev(): $(this).prev()

What you'd like to do can be accomplished using

$("input.BoldButton").click(function(){
    if ($(this).prev().find('b').length) {
      // bold text in there!
    } else {
      // no bold text
    }
});

Keep in mind, though, that this will only find text that has been emboldened using <b>. Some WYSIWYG editors like <strong> more, so you'll have to .find('strong') (or do both using .find('b, strong').

Answer 2

You can use the .prev() jquery function.

Answer 3

If the text is made bold using <b> tags, you could use the .is() method with the :has() selector on the previous element to check if it has a any descendant <b> tags.

Like this:

$("input.BoldButton").click(function(){
    if ($(this).prev().is(':has(b,strong)')) {
      // do something
    } else {
      // do something else
    }
});

The .is() returns a boolean value if it matches the selector provided. The :has() selector determines if there is a descendant with the selector provided.

• http://api.jquery.com/is/
• http://api.jquery.com/has-selector/

---

EDIT: As requested in a comment, updated to include a check for <strong> tags as well.

Answer 4

$("input.BoldButton").click(function(){ 
    var myprev = $(this).prev();

    if () { 
      $('').(); 
    } else { 
        $('').(); 
      { 
}); 

EDIT: My curiosity got the best of me SO I did the following:

 var myprev = $(this).prev();
 var mybold = myprev.css('font-weight');
 if (mybold > 400)...

which in MY opinion is better than the accepted answer as it works for 'b', 'strong' as well as CSS set values which have 400 as "normal", bold, bolder etc. (tested in IE8 only but seems to work, would be curious if anyone finds other browsers different in the result)

Here is the working example to show the effects of this: http://jsfiddle.net/WtBkR/2/