loop the .append() with selector as variable

Question 1

Question by user2108245

I am trying to loop the .append() function in order to change the selector each time with different value. But, I don’t know the syntax for the selector in order to meet my target. So, how to change it? Thanks so much!
Ka Ho

<script type="text/javascript">
var a=3;
for (var i=0;i<a;i++)                       {                           
$i.append(i);
}
</script>

<div class="0"></div> // expected: display 0
<div class="1"></div> // expected: display 1
<div class="2"></div> // expected: display 2

Answer

Answer by Starx

Starx

First of all numeric class and ids are not supported that much as you think it is.

Update your HTML to something like this

<div class="box-0"></div>
<div class="box-1"></div>
<div class="box-2"></div>

Then you can use the script provided by deadlock in his answer.

var a=3;
for (var i=0;i<a;i++) {                           
    $(".box-"+i).append(i); //this is what you need
}

Question 2

Question by John Buckwell

John Buckwell

I am using a jQuery selector to check for characters in href:

var param = "something";
$("a[href*="+param+"]").css("color", "red");

This works fine until “something” contains an = sign. Eg:

var param = "xkey=123";
$("a[href*="+param+"]").css("color", "red");

then I get no result. Anyone know a solution?

Answer

Answer by Starx

Starx

It is behaving that way becuase, at the end it will translate to ambiguous selector i.e. $("a[href*=xkey=123]") which indeed is invalid.

Escape the equal sign with \ infront and wrap the parameter part with a quote

var param = "xkey\=123";
$("a[href*='"+param+"']").css("color", "red");

Question 3

Question by Anonymous

Anonymous

I’m having trouble keeping event handlers attached to future loaded selectors. For example, when pull.php is loaded, the confirmdelete is no longer hidden, and also the click event handlers no longer exist. I am new to jquery and ajax. Below is my code.
$id= (int)strip_tags($_GET[‘id’]);

$(document).ready(function() { //make a comment delete js file eventually, just so we can reference the source
    $('.confirmdeletecomment').hide();
    $('.deletecomment').on("click", function(e){
        var cid = $(this).attr("id");
        $('a#c'+cid).show(500, function(){ //right now as call back
            $(this).on("click", function(e){
            var id = $(this).attr("id"); 
            var did = id.substring(1);  
            $.post(

                'deletecommentdata.php?cid='+did,

                function(data)
                {
                   $("#commentarea").load("pull.php?id=<? echo $id; ?>");
                   $("#comment").val("");
                   $('.confirmdeletecomment').hide();

                }

                )

                e.preventDefault();//so it doesn't interpret is as an anchor link

                });



                });

    e.preventDefault();//so it doesn't interpret is as an anchor link
    });


});

</script>

the below script is the php part:

<div id="commentarea">

<?

$query = mysql_query("SELECT users.user_id, users.username, users.miniavatar, comments.comment_id, comments.comment, comments.time_stamp FROM users INNER JOIN comments ON users.user_id=comments.products_users_user_id WHERE comments.products_products_id = '$id' ORDER BY comments.time_stamp DESC");

while($row2 = mysql_fetch_array($query)) {

?>
<div id='singlecomment'>

<hr class="comment" />
<table>
<col width="*" />
<col width="400" />
<col width="*" />    
<tr>
<td valign = "top" rowspan="2">
<a href="collection.php?profile=<? echo $row2['user_id']; ?>"><img src="<? echo $row2['miniavatar']; ?>" height="52" width="52" /></a> <br />
<?  
if ($user_id == $row2['user_id']) { 
    $cid = $row2['comment_id'];


    echo "<a id='$cid' class='deletecomment' title='Delete Post'>X</a> &nbsp";
    echo "<a id='c$cid' class='confirmdeletecomment'>confirm</a>";
}   
?>
</td>
<td valign="top">
<a class="blue" href="collection.php?profile=<? echo $row2['user_id']; ?>"> <? echo $row2['username']; ?> </a>
</td>
<td> 
<span class="date"><? echo date("F j, Y g:i a ", strtotime($row2['time_stamp'])); ?> </span>
</td>
<tr>
<td colspan="2">
<? echo stripslashes($row2['comment']); ?> <br/><br/>
</td>
</tr>
</table> 
</div>

Answer

Answer by Starx

Starx

I am guessing the event got messed up since you are the passing the event handler from

$('.deletecomment').on("click", function(e){

to

 $(this).on("click", function(e){

Change the event names, if you really want to handle them separately. More like updating your second handler as these will do goo

$(this).on("click", function(event){

Since I dont have your markup structure, I am guessing, when you are loading pull.php to #commentarea, another element with class confirmdelete should have been loaded as well, thus making the code execution incomplete logically.

Put, $(".confirmdelete").hide(); right above e.preventDefault() to see if I am right.

Question 4

Question by cabaret

cabaret

This might be a duplicate question, however I did search and I got so many different answers that I don’t know which to use or how to do this.

<?
if(isset($content))
{
    $i = 1;
    foreach($content as $item)
    {
        echo "<li><a href='#' name='" . $item['id'] . "'>" . $item['title'] . "</a></li>";
        $i++;
    }
}
?>

I’ve added a function to these links with jQuery to handle an ajax call. I select the links as follows:

    $("#tips_list ul li a").click(function(e)   { //... }

However, this doesn’t make a lot of sense because now you have to click on the actual text instead of the list item. So I figured I’d re-structure my HTML so the anchor tag wraps around the li tag.

    `<a href="#" name=""><li>foo</li></a>`

I then changed my jQuery code accordingly:

    $("#tips_list ul a li").click(function(e)   { //... }

However, now, when I click.. it grabs the list item tag as $(this); which means I can’t really grab the name attribute from the anchor tag. So! What I need to do is to grab the name attribute from the parent anchor tag. And I honestly have no clue what the easiest way to do this is. I’m not that experienced with jQuery.

Thanks a lot for helping me!

Answer

Answer by phil

phil

How about going back to the original method, and set #tips_list ul li a {display:block} in your CSS? That should make the a expand and take up the whole li, making the whole li seem clickable. Your original code should then work fine.

Answer

Answer by Starx

Starx

Keep the old markup. The later one is quite cranky and use the following script.

$("#tips_list ul li").click(function(e)   {
    var name = $(this).children("a").attr("name");
    alert(name);
}

Tag: selector

loop the .append() with selector as variable

Question by user2108245

Answer by Starx

jquery selector contains equals sign

Question by John Buckwell

Answer by Starx

jquery comment system on.(…click) issue

Question by Anonymous

Answer by Starx

jQuery select parent

Question by cabaret

Answer by phil

Answer by Starx

Please fill the form - I will response as fast as I can!