1

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);
    }
});

});
5
  • You mean you want to refer to the previous sibling of a button? Jul 29, 2010 at 14:40
  • How about $("input.BoldButton:before") or something like this? (I don't remeber if :before is legal though :-P
    – Alxandr
    Jul 29, 2010 at 14:42
  • 3
    I think you want single quotes around the $('<input> elements in the insertAfter not double quotes. Jul 29, 2010 at 14:43
  • Yeah, thanks, I just updated that in my real code, realizing. My bad
    – Qcom
    Jul 29, 2010 at 14:49
  • Note that the .click() will need to be .live('click' function()... for it to work right on the inserted elements that way or perhaps use .delegate() depending on your version and markup. Jul 29, 2010 at 22:10

4 Answers 4

1

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.


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

3
  • Could I cover strong as well, just look if it "has" both?
    – Qcom
    Jul 29, 2010 at 14:49
  • @BOSS - Absolutely. Just comma separate the tags inside the :has() like :has(b,strong). I'll update.
    – user113716
    Jul 29, 2010 at 14:54
  • Great, thank you so much, that really helped a lot! I updated the final code in my post too.
    – Qcom
    Jul 29, 2010 at 15:00
1

You can use the .prev() jquery function.

0
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').

7
  • @BOSS: Is text made bold using the b tag or via CSS? Jul 29, 2010 at 14:45
  • Yeah, it is using strong, so I will use MvanGeest's example above, just to cover any inconsistency.
    – Qcom
    Jul 29, 2010 at 14:47
  • OK, great, that's similar to patrick's but it contains <b> as well. And the "has" component isn't a selector of .is so we can use .has :)
    – Qcom
    Jul 29, 2010 at 14:55
  • @MvanGeest - Your updated version won't work because .has() will always return a jQuery object, so the result of the test will always be true.
    – user113716
    Jul 29, 2010 at 14:56
  • @patrick dw: forgot that, thanks. @Mark Schultheiss: currently, they're ignored. @BOSS: because an empty jQuery set evaluates to true. If the answer helped you, consider voting it up/marking it as Accepted.
    – MvanGeest
    Jul 29, 2010 at 14:59
1
$("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/

1
  • You might need to modify your selector for .prev() if it contains elements. (no idea from OP information) Also note that the .click() as he has it will NOT work on the inserted elements which further confuses the issue - will need to use .live() or .delegate() for that to work correctly, but the event is another issue altogether (he only asked about the selector) Jul 29, 2010 at 22:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.