Select the custom tag from button attribute

Question

I have created a button element structure like below

<input 
      type="button" 
      class="btn btn-primary" 
      name="redirect" 
      value="<mycustomtag data-id=15>"
      title="<mycustomtag data-id=14>"
>

Now, whenever the DOM gets ready I'm trying to find out the custom element and trying to replace with string. But I'm not able to replace the custom element.

The snippets I have used to find is as below

jQuery("mycustomtag").each(function(){
    //process here
});

PS this works fine in the following case:

<div><mycustomtag data-id=20></div>
<h4><mycustomtag data-id=18></h4>

score 1 · Answer 1 · answered Sep 28 '18 at 09:05

your code

jQuery("mycustomtag")

will try to find tag named mycustomtag, and what i understand is you are trying to replace the input attributes right ?

try following

//if you want to get values
var value = $("#btnCustom").attr("value");
var title = $("#btnCustom").attr("title");
alert(value);
alert(title);

//if you want to set values
$("#btnCustom").attr("value","replacevalue");
$("#btnCustom").attr("title","replace value 2");
value = $("#btnCustom").attr("value");
title = $("#btnCustom").attr("title");
alert(value);
alert(title);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input 
      type="button" 
      class="btn btn-primary" 
      name="redirect" 
      value="<mycustomtag data-id=15>"
      title="<mycustomtag data-id=14>"
      id="btnCustom"
>

Zakaria Acharki · Answer 2 · 2018-09-28T10:04:54.313

1

You couldn't find them since the value of an attribute is considered just like a string.

To find those elements you need to select them based on the main tag by selecting the specific attribute using .prop(), like :

$('input').each(function() {
   $(this).val();
   $(this).prop('title');
});

PS this works fine in the following case

That because in this case it's considered as a tag element in your DOM that why jQuery can find it by a simple selector.

$('input').each(function() {
  console.log($(this).val());
  console.log($(this).prop('title'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" class="btn btn-primary" name="redirect" value="<mycustomtag data-id=15>" title="<mycustomtag data-id=14>">

edited Sep 28 '18 at 10:04

answered Sep 28 '18 at 09:05

Zakaria Acharki

66,747
15
75
101

Is that what you was looking for? – Zakaria Acharki Sep 28 '18 at 10:05
I know it considers as a string rather than the DOM attribute. I looking for the predefined method (if any) to find such attributes. If not I have achieved this by using the solution suggested by you. – aMoL Thite Oct 01 '18 at 06:59
Unfortunately, There's no built-in method in javascript/jQuery could target those elements directly. – Zakaria Acharki Oct 01 '18 at 07:08

score 0 · Answer 3 · answered Sep 28 '18 at 09:07

In your first HTML code what you're looking for is in the value or title attribute. In your second it's the element name.

To select an element based on its value, use the following syntax:

$("input[value='<mycustomtag data-id=15>'")

To select an element based on its title works similarly.

cнŝdk · Answer 4 · 2018-09-28T09:17:28.967

If you put your custom tag in an attribute of another tag it won't be rendered in the page, in other words it won't be part of the document DOM tree, it will be just a string in an attribute, that's why when you use jQuery("mycustomtag") you don't get anything, but it will work if you put it as a child of a div or a span.

So in your specific case you will need to use .attr() method to get it from this specific attribute or .val() method if it's in the value.

jQuery("input").attr("title");
jQuery("input").val();

Demo:

console.log(jQuery("input").attr("title"));
console.log(jQuery("input").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input 
      type="button" 
      class="btn btn-primary" 
      name="redirect" 
      value="<mycustomtag data-id=15>"
      title="<mycustomtag data-id=14>"
>

Select the custom tag from button attribute

4 Answers4