jquery selecting using (this)
If there are multiple rows. How can I use (this) to select the span class "currentDogTag", after I click the button with the click function? When I try to alert(this) in the click function, it returns an object.
<?php do { ?>
<div class="owner-pet-row"><a name="petid<?php echo $row_rsOwnerPets['id_pet']; ?>" id="petid<?php echo $row_rsOwnerPets['id_pet']; ?>"></a>
<div class="owner-pet-row-petname">
<div class="owner-pet-edit-pet"><a href="pet-edit.php?id=<?php echo $row_rsOwnerPets['id_pet']; ?>">edit</a></div>
<?php echo $row_rsOwnerPets['dogname_pet']; ?></div>
<div class="owner-pet-row-left-div">
<div class="owner-pet-row-container">
<div class="owner-pet-view-label">Tag#:</div>
<div class="owner-pet-view-data"><span class="currentDogTag"><?php echo $row_rsGetCurrentTag['tagnumber']; ?> | <strong><?php echo $row_rsGetCurrentTag['year_tag']; ?></strong></span> <a href="javascript:void(0);" class="update-dogtag-tag" dogtagid="<?php echo $row_rsOwnerPets['id_pet']; ?>">Update Tag</a>
<div style="display:none" class="formfor-tagupdate">
<form id="form1" name="form1" method="post" action="" onSubmit="return false">
<div class="form-row">tagnumber
<input name="tagnumber" type="text" class="form-inputbox" id="tagnumber" />
</div>
<div class="form-row">year
<select name="year_tag" id="year_tag" style="width:100px">
<option>NULL</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
</div>
<div class="form-row-buttons">
<input name="update" type="submit" class="form-button-save" id="upd开发者_JAVA百科ate" value="save" />
<input name="id_pet" type="hidden" id="id_pet" value="<?php echo $row_rsPetInfo['id_pet']; ?>" />
</div>
</form>
</div>
</div>
</div>
<div class="owner-pet-row-container">
<div class="owner-pet-view-label">Color:</div>
<div class="owner-pet-view-data"><?php echo $row_rsOwnerPets['color_pet']; ?></div>
<div class="owner-pet-row-container">
<div class="owner-pet-view-label">Breed:</div>
<div class="owner-pet-view-data"><?php echo $row_rsOwnerPets['breed_pet']; ?></div>
</div>
</div>
</div>
<div class="owner-pet-row-right-div">
<div class="owner-pet-row-container">
<div class="owner-pet-view-label">Shot Given:</div>
<div class="owner-pet-view-data"><?php echo $row_rsOwnerPets['rabieshotgiven_pet']; ?></div>
</div>
<div class="owner-pet-row-container">
<div class="owner-pet-view-label">Shot Expire:</div>
<div class="owner-pet-view-data"><?php echo $row_rsOwnerPets['rabiesshotexpire_pet']; ?></div>
</div>
<div class="owner-pet-row-container">
<div class="owner-pet-view-label">Vet:</div>
<div class="owner-pet-view-data"><?php echo $row_rsOwnerPets['name_vet']; ?></div>
</div>
</div>
<div style="clear:both"></div>
</div>
<?php } while ($row_rsOwnerPets = mysql_fetch_assoc($rsOwnerPets)); ?>
</div>
Well when you select those span tags say for example your span tags have a class of .myspan
then selecting them $('.myspan')
you can extract the span element you would like by using selectors such as .eq( index )
, so doing $('.myspan').eq(1)
would give you the second one. other ways $('.myspan:first')
or $('.myspan:last')
or even $('.myspan:first').next()
etc
From a performance side, you should always prefer ids over classes and navigating the dom tree, as it is way faster.
IF you use firebug, you can use console.info as logging and log every step, so you can reproduce them. Done properly, you know where you are in the dom and can act accordingly. Way better is debugging with firebug, but this might not help you with your problem where you are in the dom.
Maybe you could provide a minor code sample so one could point out which tasks to perform. I think you would benefit as your description sounds very complicated and the task you want to accomplish doesn't need to be done complicated.
To get further into the project, for simplicity and maybe better practice, I created an id for the span, so that i can easily find it and update it.
精彩评论